HTML5 Code for Videos and Slideshows - Web Team Procedures and Notes

This page is intended for use only by the Web Team.

NOTE: Subject to change.

Go to Code for Video, Slideshows, and more.

NOTE: Tested and validates.

Embed HTML5 Video

Without Flash Fallback, with Fallback Image:

<video controls preload="none" poster="path/filename.jpg"
  width="720" height="480">
  <source src="path/video.mp4" type="video/mp4">
  <source src="path/video.ogv" type="video/ogg">
  <source src="path/video.webm" type="video/webm">
  <!--Fallback image-->
  <img src="path/imagefilename.jpg" width="720" height="480" alt="__VIDEO_TITLE__.">
  <p>Your browser does not support HTML5 video.</p>
</video>

With Flash Fallback using YouTube (for the Flash player) and Fallback Image:

<video controls preload="none" poster="path/imagefilename.jpg"
  width="720" height="480">
  <source src="path/video.mp4" type="video/mp4">
  <source src="path/video.ogv" type="video/ogg">
  <source src="path/video.webm" type="video/webm">
  <!--Flash Fallback using YouTube-->
  <object type="application/x-shockwave-flash" data="http://www.youtube.com/v/YE7VzlLtp-4"
    width="720" height="504">
    <param name="allowfullscreen" value="true">
    <param name="allowscriptaccess" value="always">
    <param name="flashvars" value="file=path/video.mp4">
    <param name="flashvars" value="controlbar=over&amp;image=path/filenameimage.jpg&amp;file=path/video.mp4" />
    <!--[if IE]><param name="movie" value="http://www.youtube.com/v/YE7VzlLtp-4"><![endif]-->
    <!--Fallback image-->
    <img src="path/imagefilename.jpg" width="720" height="480" alt="__VIDEO_TITLE__.">
    <p>Your browser does not support HTML5 video.</p>
</object>
  <!--end Flash Fallback-->
</video>
<p>Download video:
  <a href="path/video.mp4">MP4</a>,
  <a href="path/video.ogv">OGG</a>,
  <a href="path/video.webm">WebM</a>.</p>

See also: http://camendesign.com/code/video_for_everybody.

Example: Student Multimedia Project: Scaredy Fish.

Download video: MP4, OGG, WebM.

Embed HTML5 YouTube Video

<div class="embeddedmedia video centertag">
<div class="source"><a href="http://www.youtube.com/watch?v=dIVrX4ltwSM">Ohlone LAB Program video on YouTube.</a></div>
<div class="notecaptiontranscript">(Video is captioned; no transcript.)</div>
<iframe width="600" height="450" src="//www.youtube.com/embed/dIVrX4ltwSM?rel=0" frameborder="0" allowfullscreen></iframe>
</div>

Embed HTML5 Vimeo Video

<div class="embeddedmedia video centertag" style="width:600px;">
<div class="source"><a href="http://vimeo.com/71790639">Ohlone College Multimedia Department Documentary video on Vimeo</a></div>
<div class="notecaptiontranscript">(Video is not captioned; no transcript.)</div>
<iframe src="//player.vimeo.com/video/71790639?color=ffffff" width="600" height="337" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>

Embed HTML5 Flickr Slideshow By Album/Set Number

<div class="embeddedmedia flickr centertag" style="width:600px;">
<div class="source"><a href="https://www.flickr.com/photos/ohlonecollege/sets/SETID/">TITLE photos on Ohlone College's Flickr site.</a></div>
<iframe align="center" src="http://www.flickr.com/slideShow/index.gne?group_id=&user_id=11324776@N00&set_id=SETID" frameBorder="0" width="600" height="400" scrolling="no"></iframe>
</div>