Custom video player

by Sasá Rafalsky

HTML

<section id="wrapper">
    <div class="videoContainer">
        <video id="myVideo" controls preload="auto" width="100%" height="100%">
            <source src="http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4" type="video/mp4" />
            <p>Your browser does not support the video tag.</p>
        </video>
        <div class="caption">Title of my video "Add+"-"Close X"</div>
        <div class="control">
            <div class="topControl">
                <div class="progress"> <span class="bufferBar"></span>
 <span class="timeBar"></span>

                </div>
                <div class="time"> <span class="current"></span> /	<span class="duration"></span> 
                </div>
            </div>
            <!--BOTTOM CONTROLS -->
            <div class="btmControl">
                <div class="btnPlay btn" title="Play/Pause"></div>
                <div class="volume" title="Set volume"> <span class="volumeBar"></span>

                </div>
                <div class="sound sound2 btn" title="Mute/Unmute sound"></div>
            </div>
            <!--//BOTTOM CONTROLS -->
        </div>
        <div class="loading"></div>
    </div>
</section>

CSS

body {
    font-family: sans-serif;
}
/* video container */
 .videoContainer {
    width:760px;
    height:427px;
    position:relative;
    overflow:hidden;
    background:#000;
    color:#fff;
}
/* video caption css HEADER*/
 .caption {
    display:none;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    padding:10px;
    color:#ccc;
    font-size:20px;
    font-weight:bold;
    box-sizing: border-box;
    -ms-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    background: #1F1F1F;
}
/*** VIDEO CONTROLS CSS ***/

/* control holder */
 .control {
    background:#666;
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    z-index:5;
    display:none;
}
/* control top part */
 .topControl {
    background:#1F1F1F;
    position: relative;
    transform: translate(60px, 22px);
}
/* control bottom part */
 .btmControl {
    clear:both;
    background: #1F1F1F;}
.control div.btn {
    float:left;
    width:34px;
    height:30px;
    padding:0 5px;
    border-right:1px solid #404040;
    cursor:pointer;
}
.control div.text {
    font-size:12px;
    font-weight:bold;
    line-height:30px;
    text-align:center;
    font-family:verdana;
    width:20px;
    border:none;
    color:#777;
}
.control div.btnPlay {
    background:green;
    border-left:1px solid #404040;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 0 10px 16px;
    border-color: transparent transparent transparent #007bff;
}
.control div.paused {
    background:pink;
}
 .control div.selected {
    font-size:15px;
    color:#ccc;
}
.control div.sound {
    background:url(control.png) no-repeat -88px -30px;
    border:none;
    float:right;
}
.control div.sound2 {
    background:url(control.png) no-repeat -88px -60px !important;
}
.control div.muted {
    background:url(control.png) no-repeat -88px 0 !important;
}
.control div.btnFS {
    background:url(control.png) no-repeat -44px 0;
   ...

JavaScript

$(document).ready(function () {
    //INITIALIZE
    var video = $('#myVideo');

    //remove default control when JS loaded
    video[0].removeAttribute("controls");
    $('.control').show().css({
        'bottom': -45
    });
    $('.loading').fadeIn(500);
    $('.caption').fadeIn(500);

    //before everything get started
    video.on('loadedmetadata', function () {
        $('.caption').animate({
            'top': -45
        }, 300);

        //set video properties
        $('.current').text(timeFormat(0));
        $('.duration').text(timeFormat(video[0].duration));
        updateVolume(0, 0.7);

        //start to get video buffering data 
        setTimeout(startBuffer, 150);

        //bind video events
        $('.videoContainer')
            .append('<div id="init"></div>')
            .hover(function () {
            $('.control').stop().animate({
                'bottom': 0
            }, 300);
            $('.caption').stop().animate({
                'top': 0
            }, 300);
        }, function () {
            if (!volumeDrag && !timeDrag) {
                $('.control').stop().animate({
                    'bottom': -50
                }, 300);
                $('.caption').stop().animate({
                    'top': -50
                }, 300);
            }
        })
            .on('click', function () {
            $('#init').remove();
            $('.btnPlay').addClass('paused');
            $(this).unbind('click');
            video[0].play();
        });
        $('#init').fadeIn(200);
    });

    //display video buffering bar
    var startBuffer = function () {
        var currentBuffer = video[0].buffered.end(0);
        var maxduration = video[0].duration;
        var perc = 100 * currentBuffer / maxduration;
        $('.bufferBar').css('width', perc + '%');

        if (currentBuffer < maxduration) {
            setTimeout(startBuffer, 500);
        }
    };

    //display current video play time
    video.on('timeupdate',...