Custom HTML Video Player

by SHELDON PASCIAK

HTML

<video id="video" width="500" oncontextmenu="return false;" autoplay loop>
     <source src="http://www.w3schools.com/tags/mov_bbb.mp4" type="video/mp4" >
        <source src="http://www.w3schools.com/tags/mov_bbb.ogg" type="video/ogg">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" class="ab">
<input type="range" id="volume-bar" min="0" max="1" step="0.1" value="1">

CSS

#video {
    background:white url(http://cdn.css-tricks.com/wp-content/uploads/2011/02/spinnnnnn.gif) no-repeat center;
}
#Layer {
    background: url(http://cdn3.iconfinder.com/data/icons/snowish/128x128/actions/gtk-media-play-ltr.png) no-repeat center;
    opacity:10;
    display:none;
}
.pause {
    background: url(http://cdn1.iconfinder.com/data/icons/snowish/128x128/actions/gtk-media-pause.png) no-repeat center !important;
    display:none;
}
#seek-bar {
    width: 496px;
}

input[type=range] {
    /*removes default webkit styles*/
    -webkit-appearance: none;
    
    /*fix for FF unable to apply focus style bug */
    border: 1px solid white;
    
    /*required for proper track sizing in FF*/
    width: 300px;
}
input[type=range]::-webkit-slider-runnable-track {
    width: 300px;
    height: 5px;
    background: #ddd;
    border: none;
    border-radius: 3px;
}
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: goldenrod;
    margin-top: -5px;
}
input[type=range]:focus {
    outline: none;
}
input[type=range]:focus::-webkit-slider-runnable-track {
    background: #ccc;
}

input[type=range]::-moz-range-track {
    width: 300px;
    height: 5px;
    background: #ddd;
    border: none;
    border-radius: 3px;
}
input[type=range]::-moz-range-thumb {
    border: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: goldenrod;
}

/*hide the outline behind the border*/
input[type=range]:-moz-focusring{
    outline: 1px solid white;
    outline-offset: -1px;
}

input[type=range]::-ms-track {
    width: 300px;
    height: 5px;
    
    /*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
    background: transparent;
    
    /*leave room for the larger thumb to overflow with a transparent border */
    border-color: transparent;
    border-width: 6px 0;

    /*remove default tick marks*/
  ...

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

    //Switching play/pause image on the player
    $("#Layer").on("click", function (e) {

        var myVideo = $("#video")[0];
        if (myVideo.paused) {
            myVideo.play();
            $(this).addClass("pause");
        } else {
            myVideo.pause();
            $(this).removeClass("pause");
        }
    });

    //Toggle behaviour for play/pause 
    $("#video").on("click", function (e) {
        var myVideo = $(this)[0];
        if (myVideo.paused) {
            myVideo.play();
        } else {
            myVideo.pause();
        }
    });

    //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 myVideo = $("#video")[0];
        myVideo.volume = $(this).val();
        if(myVideo.volume==0) {
            $('.ab').css('display', 'none');
        }else{  $('.ab').css('display', 'inline-block');}
    });

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

    //Seek bar drag to move the current playing video at the time.
    $("#seek-bar").on("mouseup", function () {
        var myVideo = $("#video")[0];

        var currentTime = $("#seek-bar").val() / (100 / myVideo.duration);
        myVideo.currentTime = currentTime;
    });

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

});