VideoJS

A basic example of VideoJS

by Reusablecode

HTML

<link rel="stylesheet" href="http://github.com/zencoder/video-js/raw/master/video-js.css">
<script src="http://github.com/zencoder/video-js/raw/master/video.js"></script>
<!-- Begin VideoJS -->
<div class="video-js-box">
    <!-- Using the Video for Everybody Embed Code http://camendesign.com/code/video_for_everybody -->
    <video id="example_video_1" class="video-js" width="640" height="264" poster="http://video-js.zencoder.com/oceans-clip.png" controls preload>
        <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
            <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm; codecs="vp8, vorbis"'>
                <source src="http://video-js.zencoder.com/oceans-clip.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="264" 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://video-js.zencoder.com/oceans-clip.png", {"url": "http://video-js.zencoder.com/oceans-clip.mp4","autoPlay":false,"autoBuffering":true}]}' />
                        <!-- Image Fallback. Typically the same as the poster image. -->
                        <img src="http://video-js.zencoder.com/oceans-clip.png" width="640" height="264" alt="Poster Image"
                        title="No video playback capabilities." />
                    </object>
                    </video>
                        <!-- Download links provided for devices that can't play video in the browser. -->
  ...

CSS

body .vjs-play-control {
    border: solid 1px red;
}

JavaScript

VideoJS.setupAllWhenReady({
    controlsBelow: true,
    controlsHiding: false
});

VideoJS.DOMReady(function() {
    var myPlayer = VideoJS.setup("example_video_1");
});


/* Creating this HTML
  <ul class="vjs-controls">
    <li class="vjs-play-control vjs-play">
      <span></span>
    </li>
    <li class="vjs-progress-control">
      <ul class="vjs-progress-holder">
        <li class="vjs-load-progress"></li>
        <li class="vjs-play-progress"></li>
      </ul>
    </li>
    <li class="vjs-time-control">
      <span class="vjs-current-time-display">00:00</span><span> / </span><span class="vjs-duration-display">00:00</span>
    </li>
    <li class="vjs-volume-control">
      <ul>
        <li></li><li></li><li></li><li></li><li></li><li></li>
      </ul>
    </li>
    <li class="vjs-fullscreen-control">
      <ul>
        <li></li><li></li><li></li><li></li>
      </ul>
    </li>
  </ul>
*/