贝壳如视html5,使用html5进行视频播放(示例代码)

在播放视频时，经常需要对播放进行控制。这时我们就需要使用 HTML5 元素的方法、属性和事件。

暂停/播放

video 的 play()、pause() 方法分别用于实现视频的播放、暂停。

通过对 video 标签的 paused 属性进行判断，可以知道当前视频的播放状态。视频处于播放状态时，paused 为 false；处于暂停状态时， paused 为 true。

示例：

var v = document.getElementById(\'video\');

var playBtn = document.getElementById(\'play_btn\');

playBtn.textContent = \'>\';

playBtn.addEventListener("click", function(){

if(v.paused){

v.play();

playBtn.textContent = \'||\';

}else{

v.pause();

playBtn.textContent = \'>\';

}

});

音量

通过 volume 属性可以控制播放音量。

volume 的值在 0~1 之间。

音量+

-

var v = document.getElementById(\'video\');

var volIncBtn = document.getElementById(\'vol_inc_btn\');

var volDecBtn = document.getElementById(\'vol_dec_btn\');

volIncBtn.addEventListener("click", function(){

v.volume > 0.9?v.volume = 1:v.volume += 0.1;

})

volDecBtn.addEventListener("click", function(){

v.volume < 0.1?v.volume = 0:v.volume -= 0.1;

})

muted 属性表示是否静音。值为 true 时，视频被静音。

静音

var mutedBtn = document.getElementById(\'muted_btn\');

mutedBtn.addEventListener("click", function(){

v.muted = !v.muted;

mutedBtn.textContent = v.muted?\'恢复\':\'静音\';

})

播放时间

video 的 currentTime 属性用来获取当前播放的位置。duration 属性表示当前资源的长度。利用这两个属性，可以实现 当前时刻/总长度 格式的时间显示。

/

var nowTime = document.getElementById(\'now_time\');

var duration = document.getElementById(\'duration\');

//初始值设为0

nowTime.textContent = 0;

duration.textContent = 0;

//currentTime 和 duration 单位都是秒，我们写一个函数来将时间显示格式变为 mm:ss。

function parseTime(time){

time = Math.floor(time);

var _m, _s;

_m = Math.floor(time/60);

_s = time - _m*60;

if(_m<10){

_m = \'0\' + _m;

}

if(_s<10){

_s = \'0\' + _s;

}

return _m + \':\' + _s

}

v.addEventListener(\'timeupdate\', function(){

nowTime.textContent = parseTime(v.currentTime);

})

v.addEventListener(\'loadedmetadata\', function(){

console.log(\'loadedmetadata\')

duration.textContent = parseTime(v.duration);

})

这里用到了两个事件：timeupdate 和 loadedmetadata。

timeupdate 事件在播放时间改变时触发，在这里我们监听播放时间的改变，然后同步更新显示。

loadedmetada 在成功获取资源长度时触发。

进度条

在播放器中进度条是标配，我们在这里也简单实现以下进度条功能。

var progressWrap = document.getElementById("progressWrap");

var playProgress = document.getElementById("playProgress");

//计算当前进度条显示长度，利用前面说过的 currentTime 和 duration。

function getProgress(){

var percent = v.currentTime / v.duration;

playProgress.style.width = percent * (progressWrap.offsetWidth) + "px";

}

// 鼠标在播放条上点击时进行捕获并进行处理

function videoSeek(e){

if(v.paused || v.ended){

v.play();

}

enhanceVideoSeek(e);

}

function enhanceVideoSeek(e){

var length = e.pageX - progressWrap.offsetLeft;

var percent = length / progressWrap.offsetWidth;

playProgress.style.width = percent * (progressWrap.offsetWidth) + "px";

v.currentTime = percent * v.duration;

}

progressWrap.addEventListener(\'click\', function(e){

videoSeek(e);

})

v.addEventListener(\'timeupdate\', function(){

getProgress();

})

播放速度

playbackRate 属性代表当前的播放速度。正常播放速度为 1。 通过改变 playbackRate 的值，可以调整视频的播放速度。

例如我们实现一个快进功能，使播放速度在 正常/2倍/4倍 间切换：

快进

var speedUpBtn = document.getElementById(\'speed_up\');

var _speed = 1;

speedUpBtn.addEventListener(\'click\', function(){

changeSpeed();

});

function changeSpeed () {

_speed = _speed * 2;

if(_speed>4){

_speed = 1;

}

v.playbackRate = _speed;

speedUpBtn.textContent = _speed===1?\'快进\':\'快进x\' + _speed;

}

有了快进功能，一般还要有一个快退的功能。在这里可以用之前提到过得 currentTime 来简单实现。

快退

var backBtn = document.getElementById(\'back\');

var _back_speed = 1;

var _t;

backBtn.addEventListener(\'click\', function(){

_back_speed = _back_speed * 2;

if(_back_speed>4){

v.playbackRate = 1;

_back_speed = 1;

clearInterval(_t);

}else{

v.playbackRate = 0;

clearInterval(_t);

//通过计时器来不断改变当前播放位置，实现后退的功能

_t = setInterval(function(){

v.currentTime -= _back_speed * 0.1;

},100)

}

backBtn.textContent = _back_speed===1?\'快退\':\'快退x\' + _back_speed;

})

加载状态

通过事件 loadstart 和 loadeddata 可以监控资源的加载状态。

当资源开始加载时，触发 loadstart 事件。加载完毕时，触发 loadeddata 事件。如果加载失败，触发 error 事件。

var loadState = document.getElementById(\'load_state\');

v.addEventListener(\'loadstart\', function(){

loadState.textContent = \'视频加载中。。。\';

})

v.addEventListener(\'loadeddata\', function(){

loadState.textContent = \'加载完毕。\';

})

v.addEventListener(\'error\', function(){

loadState.textContent = \'加载失败。\';

})

全屏

现在主流浏览器基本上实现了全屏效果，但是不同浏览器实现不一样：

// Webkit (works in Safari5.1 and Chrome 15)

element.webkitRequestFullScreen();

document.webkitCancelFullScreen();

// Firefox 10+

element.mozRequestFullScreen();

document.mozCancelFullScreen();

// W3C 提议

element.requestFullscreen();

document.exitFullscreen();

实现全屏效果，只需要调用这些方法即可。

全屏

function requestFullScreen(de) {

if (de.requestFullscreen) {

de.requestFullscreen();

} else if (de.mozRequestFullScreen) {

de.mozRequestFullScreen();

} else if (de.webkitRequestFullScreen) {

de.webkitRequestFullScreen();

}

}

var fullscreen = document.getElementById(\'fullscreen\');

fullscreen.addEventListener(\'click\', function(){

requestFullScreen(v);

})

至此基本上实现了一个简单的播放器的操控组件，包括 播放、暂停、时间显示、音量调节、进度条、快进、快退、全屏等。我们的播放器张这样：

哈哈，很粗糙，但是加上样式的话会好很多吧~

除此之外， video 还提供了很多事件在上面的例子中并没有用到，就列举在下面，需要丰富功能时可以随时查看~