HTML5 Video Test

Video.js:

Download Video: MP4, WebM, Ogg
HTML5 Video Player by VideoJS

Instructions

  1. Create Three different versions of your video:
    1. JohnDoe_FINAL.mp4
    2. JohnDoe_FINAL.webm
    3. JohnDoe_FINAL.ogv
  2. Create a poster frame
  3. Download the Video.js source files from the Video.js web site.
  4. Place the video-js.css file in your css folder
  5. Place the video.js file in your js folder
  6. Add the code below 
  in the <head> of your html page:
  ...

    <link rel="stylesheet" href="css/video-js.css" type="text/css" media="screen" title="Video JS" charset="utf-8">
    <script src="js/video.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" charset="utf-8">
    	// Add VideoJS to all video tags on the page when the DOM is ready
    	VideoJS.setupAllWhenReady();
    </script>

  ...
  
  in the <body> of your html page (where you want your video to be displayed):
  
  <!-- Begin VideoJS -->
  <div class="video-js-box">

    <!-- Using the Video for Everybody Embed Code http://camendesign.com/code/video_for_everybody -->
    <video class="video-js" width="640" height="480" controls preload poster="JohnDoe_FINAL.jpg">

      <source src="JohnDoe_FINAL.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
      <source src="JohnDoe_FINAL.webm" type='video/webm; codecs="vp8, vorbis"' />
      <source src="JohnDoe_FINAL.ogv" type='video/ogg; codecs="theora, vorbis"' />

      <!-- Flash Fallback. Use any flash video player here. Make sure to keep the vjs-flash-fallback class. -->
      <object class="vjs-flash-fallback" width="640" height="480" type="application/x-shockwave-flash"
        data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf">
        <param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />

        <param name="allowfullscreen" value="true" />
        <param name="flashvars" value='config={"playlist":["http://nma.kcc.hawaii.edu/gargiulo/data/JohnDoe/spring/art222/html5/JohnDoe_FINAL.jpg", {"url": "http://nma.kcc.hawaii.edu/gargiulo/data/JohnDoe/spring/art222/html5/JohnDoe_FINAL.mp4","autoPlay":false,"autoBuffering":true}]}' />

        <!-- Image Fallback. Typically the same as the poster image. -->
        <img src="http://nma.kcc.hawaii.edu/gargiulo/data/JohnDoe/spring/art222/html5/JohnDoe_FINAL.jpg" width="640" height="480" alt="Poster Image"
          title="No video playback capabilities." />
      </object>

    </video>
    <!-- Download links provided for devices that can't play video in the browser. -->
    <p class="vjs-no-video"><strong>Download Video:</strong>
      <a href="JohnDoe_FINAL.mp4">MP4</a>,
      <a href="JohnDoe_FINAL.webm">WebM</a>,
      <a href="JohnDoe_FINAL.ogv">Ogg</a><br>

      <!-- Support VideoJS by keeping this link. -->
      <a href="http://videojs.com">HTML5 Video Player</a> by VideoJS
    </p>
  </div>

  <!-- End VideoJS -->