KB User's Guide - Documents Tab - Embedding Video

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

• 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
• iPhone
• iPad (.mp4 video must be the first listed)
• Android
• Internet Explorer 9

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

• Google Chrome (3.0 and later)
• 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.

YouTube

1. Sign into YouTube
2. Locate your YouTube Video
3. Right-click on the YouTube video screen, a drop down menu will appear
4. Select and click on Copy embed code
5. Open the KB document in HTML Design Mode in which you want the YouTube video to appear
6. Decide the placement of the YouTube video in your document, right-click and choose Paste from the menu
7. This is the embed code chosen

<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. Locate your Vimeo video
3. Click on the Share/paper airplane icon on the right side of the video
4. Click in the Embed text input box, all text in that box with be highlighted
5. Copy the text (one way would be to use Ctrl-C)
6. Open your KB document in HTML Design Mode in which you want the Vimeo video to appear
7. Decide the placement of the Vimeo video in your document, right-click and choose Paste from the menu
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>

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:

• KB User's Guide - Documents Tab - Upload a Video into Kaltura MediaSpace to Embed into a KB Document