jquery和css自定义video播放控件 - 风雨后见彩虹(2)_H5之家

startBuffer = function() { var maxduration = video[0].duration; var currentBuffer = video[0].buffered.end(0); var percentage = 100 * currentBuffer / maxduration; $('.bufferBar').css('width', percentage+'%'); if(currentBuffer < maxduration) { setTimeout(startBuffer, 500); } }; setTimeout(startBuffer, 500);

音量控制

现在,我们要增加声音控制.有两种不同的音量控制方法.静音按钮/音量栏

Mute/Unmute

js:

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

　快进/快退倒带控制

Html5 Video支持播放速度的改变.我们可以使用playbackrate属性来控制.

Fast ForwardRewindSlow Motion

不幸的是FireFox不支持playbackrate属性.以及有些版本的chrome浏览器不支持负值(倒带).到目前为止,只有Safri浏览器完全支持.

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

其他

　　除了主要的控制插件.还可以做一些额外的控制.例如全屏播放

$('.fullscreen').on('click', function() { //For Webkit video[0].webkitEnterFullscreen(); //For Firefox video[0].mozRequestFullScreen(); return false; });

开灯关灯控制

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

原文地址: