var video;
$(function(){
        video = document.getElementById('video');


        // btn
        var st_play  = '<i class="fa fa-play-circle-o" aria-hidden="true"></i>';
        var st_pause = '<i class="fa fa-pause-circle-o" aria-hidden="true"></i>';

        video.ontimeupdate = function(){
          var percentage = ( video.currentTime / video.duration ) * 100;
          $("#time span").css("width", percentage+"%");
        };

        $("#time").on("click", function(e){
            var offset = $(this).offset();
            var left = (e.pageX - offset.left);
            var totalWidth = $("#time").width();
            var percentage = ( left / totalWidth );
            var vidTime = video.duration * percentage;
            video.currentTime = vidTime;
        })
        $("#volume span").css('width',(100*video.volume)+'%')
        $("#volume").on("click", function(e){
            var offset = $(this).offset();
            var left = (e.pageX - offset.left);
            var totalWidth = $("#volume").width();
            var percentage = ( left / totalWidth );
            var volume = 1 * percentage;
            video.volume = volume;
            $("#volume span").css('width',(100*percentage)+'%')
            console.log(volume)
        })
        


        $('#play').click(function(){
            if(video.paused){
                video.play();
                $('#play').html(st_pause)
            }else{
                video.pause();
                $('#play').html(st_play)
            }
        })
})