KB User's Guide - Documents Tab - Embedding Video

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 Video Tag





HTML5 supports video without plugins using the <video> tag, much like HTML supports images without plug-ins using the <img> tag. 




MP4





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:
 
<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.






<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:





Theora Video and Vorbis Audio 








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.  








<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.






YouTube




     

  1. Sign into YouTube 
    2. 

  2. Locate your YouTube Video
    3. 

  3. Right-click on the YouTube video screen, a drop down menu will appear
    4. 

  4. Select and click on Copy embed code
    5. 

  5. Open the KB document in HTML Design Mode in which you want the YouTube video to appear
    6. 

  6. Decide the placement of the YouTube video in your document, right-click and choose Paste from the menu 
    7. 

  7. This is the embed code chosen
    8.  

    

    <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.











Vimeo


    

  1. Sign into Vimeo 
    2. 

  2. Locate your Vimeo video
    3. 

  3. Click on the Share/paper airplane icon on the right side of the video
    4. 

  4. Click in the Embed text input box, all text in that box with be highlighted
    5. 

  5. Copy the text (one way would be to use Ctrl-C)
    6. 

  6. Open your KB document in HTML Design Mode in which you want the Vimeo video to appear
    7. 

  7. Decide the placement of the Vimeo video in your document, right-click and choose Paste from the menu 
    8. 

  8. This is the embed code chosen 
    <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>
    9. 





Here is what the video would look like in your KB document




 
OCEAN from Sarosh Jacob on Vimeo.





UW-Madison Kaltura MediaSpace




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=49517






Browser Compatibility





For 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.





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.



<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.
 
 



See Also: