jQ效果：jQuery和css自定义video播放控件

<video id="myVideo" controls poster="video.jpg" width="600" height="400" >
    source src="video.mp4" type="video/mp4" />
    ="video.webm"="video/webM" ="video.ogv"="video/ogg" p>Your browser does not support the video tag.</>
video>

//return a DOM object
var video = document.getElementById('videoID'); or
var video = $('#videoID').get(0); var video = $('#videoID')[0];
 
return a jQuery object
var video = $('#videoID');

div class="control"a href="#" class="btnPlay">Play/Pauseadiv>

Play/Pause control clicked
$('.btnPlay').on('click',function() {
    if(video[0].paused) {
        video[0].play();
    }
    else {
        video[0].pause();
    }
    return false;
};

="progressTime">
   Current play time: span ="current"></span
   Video duration: ="duration">

get HTML5 video time duration
video.on('loadedmetadata',1)">() {
   $('.duration').text(video[0].duration);
});
 
update HTML5 video current play time
video.on('timeupdate',1)">() {
   $('.current').text(video[0].currentTime);
});

style>
.progressBar
{
    position: relative;
    width 100%
    height height:10px
    backgroud-color #000;
}
.timeBar
 absolute
    top 0
    left
    background-color #ccc}
="progressBar"="timeBar">

].duration));
});
 
() {
   var currentPos = video[0].currentTime; Get currenttime
   var maxduration = video[0].duration; Get video duration
   var percentage = 100 * currentPos / maxduration; in %
   $('.timeBar').css('width',percentage+'%');
});

var timeDrag = false;   /* Drag status */
$('.progressBar').mousedown((e) {
    timeDrag = true;
    updatebar(e.pageX);
});
$(document).mouseup((e) {
    if(timeDrag) {
        timeDrag = ;
        updatebar(e.pageX);
    }
});
$(document).mousemove((timeDrag) {
        updatebar(e.pageX);
    }
});
 
update Progress Bar control
var updatebar = (x) {
    var progress = $('.progressBar');
    Video duraiton
    var position = x - progress.offset().left; Click pos
    var percentage = 100 * position / progress.width();
 
    Check within range
    if(percentage > 100) {
        percentage = 100;
    }
    if(percentage < 0) {
        percentage = 0;
    }
 
    Update progress bar and video currenttime
    $('.timeBar').css('width',1)">);
    video[0].currentTime = maxduration * percentage / 100;
};

.progressBar 
   position
   width
   height
   backgroud-color
.bufferBar 
   top
   left
   background-color>
   ="bufferBar">

loop to get HTML5 video buffered data
var startBuffer = var maxduration = video[0].duration;
   var currentBuffer = video[0].buffered.end(0);
   var percentage = 100 * currentBuffer / maxduration;
   $('.bufferBar').css('width',1)">);
 
   if(currentBuffer < maxduration) {
      setTimeout(startBuffer,500);
   }
};
setTimeout(startBuffer,500);

="muted" >Mute/Unmute="volumeBar"="volume">

Mute/Unmute control clicked
$('.muted').click(() {
   video[0].muted = !video[0].muted;
   ;
});
 
Volume control clicked
$('.volumeBar').on('mousedown',1)">(e) {
   var position = e.pageX - volume.offset().left;
    volume.width();
   $('.volumeBar').css('width',1)">);
   video[0].volume = percentage / 100;
});

="ff">Fast Forward="rw">Rewind="sl">Slow Motion>

/Fast forward control
$('.ff').on('click',1)">() {
   video[0].playbackrate = 3;
   Rewind control
$('.rw').on('click',1)">() {
   video[0].playbackrate = -3Slow motion control
$('.sl').on('click',1)">() {
   video[0].playbackrate = 0.5;
});

$('.fullscreen').on('click',1)">For Webkit
   video[0].webkitEnterFullscreen();
 
   For Firefox
   video[0].mozRequestFullScreen();
 
   ;
});

$('.btnLight').click(if($(this).hasClass('on')) {
      $(this).removeClass('on');
      $('body').append('<div class="overlay"></div>');
      $('.overlay').css({
         'position':'absolute','width':100+'%':$(document).height(),'background':'#000''top':0'z-index':999
      });
      $('#myVideo').css({
         'z-index':1000
      });
   }
    {
      $(this).addClass('on').remove();
   }
   ;
});