In this document, we will show you how to present a video within the context of your KB document. You will need to take into account two factors: which web browser the user is accessing your site and what format your video is in.
HTML5 Video Tag
HTML5 supports video without plugins using the <video> tag, much like HTML supports images without plug-ins using the <img> tag.
MP4
Best Practice: the KB Team recommends using HTML5 Video tags in KB documents whenever possible. Cut and paste the code snippet below into your HTML Editor
If you are not displaying an *.ogg video type, feel free to delete the line:
<source src="movie.ogg" type="video/ogg">
from your code snippet. Also, take a moment to adjust the height and width of the video in the HTML editor found in the first line of the code snippet.
Finally, take a moment to adjust to video to your desired height and width. You may do this in the first line of the snippet:
<video width="320" height="240" controls>
This is what it would look like in your document:
Ogg/ Theora
Here is an example of embedding an *.ogv file. Replace the single instance of myvideo.ogv found in the 3rd line, with the specific file path found in your document's attachment folder.
It would be most prudent to provide two identical video files with different video file extensions as Ogg/ Theora is not supported on Internet Explorer.
Here's who supports what at this point:
Theora Video and Vorbis Audio
Mozilla Firefox (3.5 and later)
Opera (10.5 and later)
Google Chrome (3.0 and later)
H.264 Video and Advanced Audio Coding (AAC) Audio (.mp4)
Users of H.264 need licenses either from the individual patent holders, or from the MPEG LA, a group of patent holders including Microsoft and Apple. H.264 is usually used in the MP4 container format, together with AAC audio. AAC is also patented in itself, so users of MP4 will have to license both H.264 and AAC. Apple and Microsoft support only H.264.
H.264 provides a higher image quality and better streaming than Ogg and VP8. All major video editors, including Final Cut, Adobe Premiere and Avid, export to H.264 format. The same can’t be said for Ogg Theora or VP8.
Google Chrome (3.0 and later)
Safari on Macs and Windows PCs (3.0 and later) and anything else QuickTime supports
Safari on Macs and Windows PCs (3.0 and later) and anything else QuickTime supports
iPhone
iPad (.mp4 video must be the first listed)
Android
Internet Explorer 9
This is what it would look like in your document:
For browsers that do not support the <video> tag, Adobe Flash (9.0.60.184 and later) supports H.264 video and AAC audio *.mp4. You can insert the Flash object code inside the <video> tag. Browsers that support the video tag will ignore it and browsers that do not will ignore the video tag and see the flash player.
MediaSpace is a cloud-based product developed by Kaltura which facilitates the conversion and distribution of various audio and video media formats. Faculty, staff and students can upload media content to UW-Madison MediaSpace, at which point it is automatically converted and optimized for hassle-free distribution on the web.
Please review this document to see exactly what steps you need to attain the embed code snippet that you can place into a KB document.
For maximum web browser compatibility most web sites use the <object><object> tags and then nest the <embed> tags within that for backward compatibility with older browsers.
Video Format Compatibility
Below are examples of how one would embed videos in Windows Media, Quicktime and Flash formats.
Windows Media
Here is an example of embedding a Windows Media file. On your page you would replace both instances of filename.wmv with the specific file path found in your document's attachment folder.
Here is an example of embedding a Quicktime file. Replace the two instances of media.mov with the specific file path found in your document's attachment folder.
