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 browser the user is accessing your site and what format your video is in.
HTML5 supports video without plugins using the <video> tag, much like HTML supports images without plug-ins using the <img> tag.
As far as Best Practices go, the KB Team recommends using HTML5 Video tags in KB documents whenever possible. Cut and paste the code snippet below into your HTML Editor
<video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> </video>
Next, replace the "movie.mp4"
with the movie path in your document or shared attachment folder.
Example
<source src="/images/group12345/12345/helpful_vid.mp4" type="video/mp4">
If you are not displaying an *.ogg video type, feel free to delete the line:
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.<source src="movie.ogg" type="video/ogg">
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:
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.
<video width="560" height="340" controls> <source src="path/to/myvideo.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> <source src="path/to/myvideo.ogv" type='video/ogg; codecs="theora, vorbis"'> </video>
This is what it would look like in your document:
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:
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.
<video width="560" height="340" preload controls> <source src="hh.h264" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> <!--<source src="hh.mov" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' /> <source src="hh.ogv" type='video/ogg; codecs="theora, vorbis"' /> <source src="hh.webm" type='video/webm; codecs="vp8, vorbis"' />--> </video>
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.
<iframe width="640" height="360" src="//www.youtube.com/embed/Ukd3FEzaZ7Y?feature=player_detailpage" frameborder="0" allowfullscreen></iframe>
Here is what the video would look like in your KB document
This video is 640 X 360. Please be mindful that a video this size may slow your website down and may not be very mobile friendly.
You may modify the width and height to make the iframe smaller. The video below is 400 X 250.
<iframe src="//player.vimeo.com/video/25323516" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <p><a href="http://vimeo.com/25323516">OCEAN</a> from <a href="http://vimeo.com/user1711605">Sarosh Jacob</a> on <a href="https://vimeo.com">Vimeo</a>.</p>
Here is what the video would look like in your KB document
OCEAN from Sarosh Jacob on Vimeo.
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.
https://kb.wisc.edu/kbGuide/page.php?id=49517For maximum browser compatibility most web sites use the <object><object> tags and then nest the <embed> tags within that for backward compatibility with older browsers.
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.
<object id="MediaPlayer" width="192" height="190" classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95" standby="Loading Windows Media Player..." TYPE="application/x-oleobject"> <param name="FileName" VALUE="filename.wmv"> <param name="ShowControls" VALUE="true"> <param name="ShowStatusBar" value="false"> <param name="ShowDisplay" VALUE="false"> <param name="autostart" VALUE="false"> <embed type="application/x-mplayer2" src="filename.wmv" name="MediaPlayer" width="192" height="190" ShowControls="1" ShowStatusBar="0" ShowDisplay="0" autostart="0"> </embed> </object>This is what it would look like in your document:
This would also work with an *.avi file as seen here:
Quicktime
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.
<OBJECT classid='clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B' width="640" height="360" codebase='http://www.apple.com/qtactivex/qtplugin.cab'> <param name='src' value="/path/to/media.mov"> <param name='autoplay' value="false"> <param name='controller' value="false"> <param name='loop' value="false"> <param name='audio' value="false> <EMBED src="/path/to/media.mov" width="640" height="360" autoplay="false" controller="false" loop="false" pluginspage='http://www.apple.com/quicktime/download/'> </EMBED> </OBJECT>This is what it would look like in your document:
Flash
Here is an example of embedding an *.swf file. Replace the both instances of MyFlashMovie.swf with the specific file path found in your document's attachment folder.
<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" width="320" height="240" id="MyMovieName"> <PARAM NAME=movie VALUE="MyFlashMovie.swf"> <PARAM NAME=quality VALUE=high> <EMBED src="MyFlashMovie.swf" quality=high width="320" height="240" NAME="MyMovieName" align="" TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"> </EMBED> </OBJECT>This is what it would look like in your document:
This particular video clip is on auto-start and does not display controls. We are working on showing those controls and providing you with a more updated script.
If you are not finding what you need after reviewing this document, please contact us at kb-team@lists.wisc.edu and we will problem solve through your needs and requirements. We will continue to improve upon this content.