使用html5进行视频播放

使⽤html5进⾏视频播放
⼀直以来⽹页⼤多是使⽤ flash 来播放视频。

在⽬前唱衰 flash 的环境下，HTML5 为我们带来了⼀个⽹页内视频播放的解决⽅案——
<video>标签。

在HTML5 中，可以通过HTML标签“audio”和“video”来⽀持嵌⼊式的媒体，使开发者能够⽅便地将媒体嵌⼊到HTML⽂档中。

视频格式
当前，video 元素⽀持三种视频格式：
Ogg = 带有 Theora 视频编码和 Vorbis ⾳频编码的 Ogg ⽂件
MPEG4 = 带有 H.264 视频编码和 AAC ⾳频编码的 MPEG 4 ⽂件
WebM = 带有 VP8 视频编码和 Vorbis ⾳频编码的 WebM ⽂件
嵌⼊媒体
html5嵌⼊媒体就和使⽤ <img> 标签嵌⼊图⽚⼀样简单，你只需要⼀个 <video> 标签就可以：
<video src="../video/2.ogg" controls>
</video>
src 属性来指定想要播放的视频⽂件，controls 属性可以显⽰视频播放控件（默认不显⽰）。

可以在 <video> 标签中设置内容，这些内容将在浏览器不⽀持 <video> 时展⽰：
<audio src="audio.ogg" controls autoplay loop>
<p>你的浏览器不⽀持video标签</p>
</audio>
播放属性
video 标签中可以设置⼀些属性来对播放器进⾏简单的控制。

⽐如规定播放器⼤⼩为640px * 480px：
<video src="../video/2.ogg" height="480" width="640" controls>
<p>你的浏览器不⽀持video标签</p>
</video>
height 和 width 属性的单位都是 pixels，即像素。

如果设置这些属性，在页⾯加载时会为视频预留出空间。

如果没有设置这些属性，那么浏览器就⽆法预先确定视频的尺⼨，这样就⽆法为视频保留合适的空间。

结果是，在页⾯加载的过程中，其布局也会产⽣变化。

再⽐如下⾯这个例⼦：
<video src="../video/2.ogg" height="480" width="640" autoplay loop muted controls>
<p>你的浏览器不⽀持video标签</p>
</video>
这个例⼦中⼜增加了三个属性：
autoplay 属性可以让视频在准备完毕后⾃动播放；
loop 属性规定视屏循环播放，即播放完毕后再次从头开始播放； muted 属性让视频播放时默认是静⾳状态
接下来再看⼀个例⼦：
<video src="../video/2.ogg" height="480" width="640" preloader="auto" poster="../video/show.png" controls>
<p>你的浏览器不⽀持video标签</p>
</video>
这⾥出现两个属性： preloader 告诉了视频在页⾯加载时进⾏加载，并预备播放。

如果使⽤ "autoplay"，则忽略该属性。

preloader 有三个属性值可设置：
"none" 不缓冲⽂件
"auto" 缓冲⾳频⽂件
"metadata" 仅仅缓冲⽂件的元数据 poster 则设定了视频的展⽰图像，包括播放前的展⽰图像和下载的展⽰图像；如果未设定此属性，⼀般情况下播放前视频区是⿊⾊的。

上⾯三个例⼦包含了html5 <video> 标签到⽬前新增的所有属性，整理如下：
height 播放器⾼度
width 播放器宽度
autoplay 视频准备完毕后⾃动播放
controls 显⽰包含“播放”、“进度条”、“全屏”等操作组件的播放控件
loop 设定视频循环播放
muted 静⾳播放视频
preload 视频在页⾯加载时进⾏加载，并预备播放。

如果使⽤ "autoplay"，则忽略该属性。

poster 视频展⽰的图像，即视频播放前或下载时展⽰的图像
<source> 标签
可以在 <video> 标签内使⽤ <source> 标签来指定多个播放⽂件，来为不同的浏览器提供可⽀持的编码格式。

例如：
<video controls>
<source src="../video/2.ogg" type="video/ogg">
<source src="../video/2.mp4" type="video/mp4">
<p>你的浏览器不⽀持video标签</p>
</video>
浏览器会先加载 2.ogg，如果不⽀持ogg格式或视频不存在，则会加载2.MP4，以此类推。

<source> 标签⾥，需要通过 src 来指定⽂件，通过 type 属性来指定⽂件格式。

<track> 标签
想要指定字幕⽂件，可以使⽤ <track> 标签；track 使⽤⽅式与 source 相同。

<video controls>
<source src="../video/2.ogg" type="video/ogg">
<source src="../video/2.mp4" type="video/mp4">
<track kind="captions" src="sampleCaptions.vtt" srclang="en">
<track kind="descriptions" src="sampleDescriptions.vtt" srclang="en">
<track kind="chapters" src="sampleChapters.vtt" srclang="en">
<p>你的浏览器不⽀持video标签</p>
</video>
<track> 标签可以⽤于规定字幕⽂件或其他包含⽂本的⽂件。

<track> 标签属性包括：
src 源⽂件
kind 指定⽂件的使⽤⽬的，默认值为 subtitles ，可选值包括：
subtitles 定义此⽂件是字幕⽂件，就是⼤家熟悉的视频底部字幕了
captions 将在播放器中显⽰的简短说明
descriptions 视频内容的⽂本描述，适⽤于盲⼈或者视频不可见时的提供的⾳频描述。

chapters 定义章节，⽤于导航媒介资源
metadata 提供给脚本使⽤的内容，对⽤户不可见
label 为字幕⽂件指定⼀个名字，以供浏览器使⽤；当浏览器需要列出可⽤的字幕⽂件时，会使⽤此名字。

srclang 轨道的语⾔，若、当 kind 属性值为 "subtitles"时，该属性是必需的
虽然 <track> 标签为 video 提供了丰富的⽂本内容⽀持，但是⽬前浏览器对于 track 的⽀持率很不乐观。

以上简单介绍了HTML5中video标签的使⽤⽅法。

下⼀篇⽂章计划介绍video事件相关内容。

想要进⾏更深⼊的了解可以在此。

使⽤html5进⾏视频播放（⼆）
在播放视频时，经常需要对播放进⾏控制。

这时我们就需要使⽤ HTML5 <video> 元素的⽅法、属性和事件。

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

通过对 video 标签的 paused 属性进⾏判断，可以知道当前视频的播放状态。

视频处于播放状态时，paused 为 false；处于暂停状态时，paused 为 true。

⽰例：
<video id="video" preloader poster="../video/show.png" height="480" width="640">
<source src="../video/trailer.MP4" type="video/mp4">
</video>
<button id="play_btn" type="button"></button>
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 之间。

<video id="video" preloader poster="../video/show.png" height="480" width="640">
<source src="../video/trailer.MP4" type="video/mp4">
</video>
<div>
⾳量<button id="vol_inc_btn" type="button">+</button>
<button id="vol_dec_btn" type="button">-</button>
</div>
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 时，视频被静⾳。

<button id="muted_btn" type="button">静⾳</button>
var mutedBtn = document.getElementById('muted_btn');
mutedBtn.addEventListener("click", function(){
v.muted = !v.muted;
mutedBtn.textContent = v.muted?'恢复':'静⾳';
})
播放时间
video 的 currentTime 属性⽤来获取当前播放的位置。

duration 属性表⽰当前资源的长度。

利⽤这两个属性，可以实现当前时刻/总长度格式的时间显⽰。

<font id="now_time" size="3"></font>/<font id="duration" size="3"></font>
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 在成功获取资源长度时触发。

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

<div id="progressWrap">
<div id="playProgress">
</div>
</div>
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倍间切换：
<button id="speed_up" type="button">快进</button>
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 来简单实现。

<button id="back" type="button">快退</button>
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 事件。

<p id="load_state"></p>
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();
实现全屏效果，只需要调⽤这些⽅法即可。

<button id="fullscreen" type="button">全屏</button>
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 还提供了很多事件在上⾯的例⼦中并没有⽤到，就列举在下⾯，需要丰富功能时可以随时查看~完整代码。