Delivering Multimedia Content on Web

On the web multimedia can be downloaded to the user, streamed to the user, embedded in the web page or uploaded to a video sharing service like YouTube for viewing or online video services like ITunes for downloading and streaming. The media files can be a very short clip or a large file like a full movie or audio book.

Embedded Media

The media file is embedded in the web page using the <object> and <embed> HTML codes. While both perform similar functions of embedding elements into the web page not all browser support both so they are used together to ensure delivery of the content. Embedded media plays in the browser plug-in version of the media player. It starts to load with the page when it is requested and can be set to start when the page loads. Since it is integrated on the web page it can be associated with the content. For example, a web page on a car model can have the video of the car showing its features.

The media player is identified in the code. The <param> values are used to identify the source of the media files, caption files and player features. These variables determine how the embedded media looks (control bars, etc) and behaves (auto play, loop, etc).

Example of <object> tag for Windows Media the classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95" identifies the player

<object ID="MediaPlayer" width="192" h="190" classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95"
standby="Loading Windows Media Player components..." type="application/x-oleobject">
<praram name="FileName" value=""http://location/blackhole.wmv">
<param name="captioningID" value="captions">
<param name="captionfilename" value="http://location/blackhole.smi">
<param name="autostart" value="false">
<param name="ShowControls" value="true">
<param name="ShowStatusBar" value="false">
<param name="ShowDisplay" value="false">
<embed type="application/x-mplayer2" src="blackhole.wmv" name="MediaPlayer"
width="192" height="190" ShowControls="1" ShowStatusBar="0" ShowDisplay="0" autostart="0"> </embed>
</object>

Resources

Codes for embedding differnt file formats
HTML code for embedding media players

Download

Large media content like movies, audio books are usually downloaded from a remote location and stored on the user's device. A download link on the page gives the URL of the media file.

Streamed

Streamed media is requested by a link on the page. It will be streamed from a media server to the media player on the user's computer. Example of code:

<a http://webserver/mediafile.asx>view this WMP file</a>
<a http://webserver/mediafile.smi>view this QT file</a>
<a http://webserver/mediafile.ram>view this Real Media file</a>

Working with YouTube

You need a YouTube account before you can upload a media file. The media files should be less 2 GB in size. YouTube supports the following media formats:

• WebM files - Vp8 video codec and Vorbis Audio codecs
• .MPEG4, 3GPP and MOV files - Typically supporting h264, mpeg4 video codecs, and AAC audio codec
• .AVI - Many cameras output this format - typically the video codec is MJPEG and audio is PCM
• .MPEGPS - Typically supporting MPEG2 video codec and MP2 audio
• .WMV
• .FLV - Adobe-FLV1 video codec, MP3 audio

To upload your video:

1. Login to your account
2. Click the Upload link at the top of any YouTube page.
3. Click the Upload video button to browse on your computer for the video file you'd like to upload. Select the file and click Open.
4. As the video file is uploading, enter information about your video in the relevant fields (including Title, Description, Tags, and Category). Information is not required but helps users to find your video. Up to 10 videos can be uploaded per session

Caption your video:

You will need a transcript file of a caption file. The transcript file is a plain text file. YouTube uses speech recognition technology to automatically time stamp an transcript in English creating a caption file. While YouTube will accept DFXP, SAMI or RealText caption files, the preferred format are .srt and .sub. Example of the file:

Accessify.com has a free online service to help create the caption file from a transcript for YouTube

1. Login to your account
2. Click My Videos.
3. Find the video to which you'd like to add captions/subtitles, Select the Captions and Subtitles from the drop down menu
4. Click the Add New Captions or Transcript button on the right hand side of the page. You will be prompted to Browse for a file to upload.
5. Select a either caption/subtitle or a transcript file to upload.
6. Select the appropriate language. If you wish, you can also enter a track name.
7. Click the Upload File button.

Embed the YouTube video on your page:

YouTube videos are flash format. You need flash plug-in installed in your browser.

1. Login your account and find the video you want to embed in your page or blog
2. Click the Embed button located under the video.
3. Copy the code provided in the expanded box.
4. Paste the code in the HTML into your blog or website.
5. Example of code

<object width="425" height="344">
<param name="movie" value="http://www.youtube.com/v/u1zgFlCw8Aw?fs=1"</param>
<param name="allowFullScreen" value="true"></param>
<param name="allowScriptAccess" value="always"></param>
<embed src="http://www.youtube.com/v/u1zgFlCw8Aw?fs=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="425" height="344"> </embed>
</object>

These material are copyrighted by EASI in 2011. We encourage your sharing useful individual pieces of information to help people. However, we request that you do not share the entire workshop without specific written permission.