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

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();