HTML5 Video - videoJS - Dynamic Loading w/ video.js

Simple methodology to dynamically replace the video source(s) and poster(s) of an HTML5 video.js object without a page reload.

by bizamajig

HTML

<link rel="stylesheet" href="http://vjs.zencdn.net/c/video-js.css">
<script src="http://vjs.zencdn.net/c/video.js"></script>
<section class="container wrap">
  <video id="div_video" class="video-js vjs-default-skin" controls preload="auto" width="511" height="382" poster="http://dev.swinginsam.com/_files/testvid_01.jpg" data-setup="{}">  
    <source src=""  type="video/mp4">
    <source src=""  type="video/ogg">
    <source src=""  type="video/webm">
  </video>
</section>

<div class="wrap">
  <input rel="01" type="button" value="load video 1">
  <input rel="02" type="button" value="load video 2">
  <input rel="03" type="button" value="load video 3">
</div>

CSS

.wrap            { margin:30px auto 10px; text-align:center }
.container       { width:511px; height:382px; border:5px solid #ccc }
p                { font: 10px/1.0em 'Helvetica',sans-serif; margin:20px }

JavaScript

$("input[type=button]").click(function() {
    var $target         = "testvid_"+$(this).attr("rel");
    var $content_path   = "http://dev.swinginsam.com/_files/";
    var $vid_obj        = _V_("div_video");
    
    // hide the current loaded poster
    $("img.vjs-poster").hide();
    
    $vid_obj.ready(function() {
      // hide the video UI
      $("#div_video_html5_api").hide();
      // and stop it from playing
      $vid_obj.pause();
      // assign the targeted videos to the source nodes
      $("video:nth-child(1)").attr("src",$content_path+$target+".mp4");
      $("video:nth-child(1)").attr("src",$content_path+$target+".ogv");
      $("video:nth-child(1)").attr("src",$content_path+$target+".webm");
      // replace the poster source
      $("img.vjs-poster").attr("src",$content_path+$target+".jpg").show();
      // reset the UI states
      $(".vjs-big-play-button").show();
      $("#div_video").removeClass("vjs-playing").addClass("vjs-paused");
      // load the new sources
      $vid_obj.load();
      $("#div_video_html5_api").show();
    });
});

$("input[rel='01']").click();