Coding: XHTML: Video
Video is a great way to add motion and sound to your project. However keep in mind that end users will need a video plug-in to video your media.
You'll want to provide specific information or guidelines to help people use your video. You may also want to indicate the type and length of the video to help end users decide whether to use your resource. It's also a good idea to provide a link to the website where the end user can download the software or plugin. such as QuickTime, Windows Media, and Real.
Keep in mind that video is not accessible to the hearing impaired, so it's important to provide alternative content.
Video Formats
You can use various file formats on your website. Although downloading video files is the easiest option. It's also possible to stream video files. Go to wikipedia to learn more about video file formats.
AVI (Audio Video Interleave) is a Micosoft format containing both audio and video. Learn more at wikipedia.
MOV is the standard QuickTime format created by Apple for audio and video. Many digital cameras provide MOV files that can be easily uploaded to the web. Learn more at wikipedia.
RealMedia is the RealVideo format. It is popular for streaming. Learn more at wikipedia.
WMV is a Windows Media Video file.
Learn more at FileInfo.net.
Video Tags
You can use a text or graphic link to share your video. You can also embed it on the page.
Separate Page
If you use the link option, it will display the video on a separate page. This option makes your video available to the largest audience.
Example
<a href="http://tipt3.utoledo.edu/starters/prairiedog/prairiedog1.mov">Prairie Dogs</a>
Result
Embedded on Page
Embedding video files is another option, however keep in mind that not all browsers can handle this option. Embedding incorporates the video directly into the page. However, it only plays if visitors have the appropriate plug-in. It's important to include the controller, so that people can enable or disable the video as they wish.
You can also set the video to play automatically using autoplay="true". You can also set the height and width of the video.
Example
<embed src="http://tipt3.utoledo.edu/starters/bears/grizzbear.mov"> </embed>
Result
Try It
There are many sources for online sounds. Use the Remote Video Collections page from Multimedia Seeds for lots of example video. Try adding a video to your practice page. You can also find videos at our Naturescapes: Video & Images Starter Resources page.
Keep in mind that a person would need to be able to play QuickTime movies to view the videos. It's a good idea to provide directions to downloading the correct plug-ins that will allow users to play sounds, movies, or animations.
You can also use the embed code provided by sites such as YouTube. Don't worry about whether you can write the orignal code, just copy what's provided. For instance,
<object width="480" height="385"><param name="movie" value="http://www.youtube.com/v/ollc4VY0naw?fs=1&hl=en_US&rel=0"> </param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/ollc4VY0naw?fs=1&hl=en_US&rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"></embed></object>
Unfortunately, the YouTube video will not always validate. You may need to edit the code for validation. For instance, the following code validates. You can do this yourself. Or, you can use a tool such as Tools4Noobs that created valid YouTube code. Tools4Noobs also has a page for Vimeo video.
<object type="application/x-shockwave-flash" style="width:480px; height:385px;" data="http://www.youtube.com/v/ollc4VY0naw">
<param name="movie" value="http://www.youtube.com/v/ollc4VY0naw" />
</object><div style="font-size: 0.8em"><a href="http://www.tools4noobs.com/online_tools/youtube_xhtml/">Get your own valid XHTML YouTube embed code</a></div>
Learn More
Playing Video in Browsers from w3