HTML5 Video Player with custom controls

by Craig Martin

HTML

<video id="video" width="500" oncontextmenu="return false;">
    <source src="http://courtofpublicopinion.com/test/100000v1.webm" type="video/webm">Your browser does not support the video tag.</video>
<div id="Layer"></div>
<input type="range" id="seek-bar" value="0">
<div class="clear"></div>
<img src="http://cdn1.iconfinder.com/data/icons/minimal/22x22/status/audio-volume-high.png">
<input type="range" id="volume-bar" min="0" max="1" step="0.1" value="1">

JavaScript

jQuery(function ($) {
    //For adding play pause layer on top on the player
 //   $("#Layer").css({
 //       position: "absolute",/
 //       top: $("#video").offset().top,
 //       left: $("#video").offset().left,
 //       width: $("#video").outerWidth(),
 //       height: $("#video").outerHeight()
//    });

    //Showing/Hiding layer on top of the player
 //   $("video").on("mouseenter", function (e) {
 //       $("#Layer").toggle();
 //   });

    //Volume bar to control video volume
    $("#volume-bar").on("change", function () {
        var vid = $("video")[0];
        vid.volume = $(this).val();
    });

    //Seek bar to sync with the current playing video
    $("video").on("timeupdate", function () {
        var vid = $(this)[0];
        var value = (100 / vid.duration) * vid.currentTime;
        $("#seek-bar").val(value);
    });

    //Seek bar drag to move the current playing video at the time.
    $("#seek-bar").on("mouseleave", function () {
        var vid = $("video")[0];
        var currentTime = $("#seek-bar").val() / (100 / vid.duration);
        vid.currentTime = currentTime;
        vid.play();
    });

    $("#seek-bar").on("mousedown", function () {
        var vid = $("video")[0];
        vid.pause();
    });
    

});