一直以来网页大多是使用 flash 来播放视频。在目前唱衰 flash 的环境下，HTML5 为我们带来了一个网页内视频播放的解决方案—— 标签。
在HTML5 中，可以通过HTML标签“audio”和“video”来支持嵌入式的媒体，使开发者能够方便地将媒体嵌入到HTML文档中。
视频格式 当前，video 元素支持三种视频格式：
Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件 MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件 WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件 嵌入媒体 html5嵌入媒体就和使用 标签就可以：
src 属性来指定想要播放的视频文件，controls 属性可以显示视频播放控件（默认不显示）。
可以在 标签中设置内容，这些内容将在浏览器不支持 时展示：
播放属性 video 标签中可以设置一些属性来对播放器进行简单的控制。
比如规定播放器大小为640px * 480px：
height 和 width 属性的单位都是 pixels， 即像素。如果设置这些属性，在页面加载时会为视频预留出空间。如果没有设置这些属性，那么浏览器就无法预先确定视频的尺寸，这样就无法为视频保留合适的空间。结果是，在页面加载的过程中，其布局也会产生变化。
再比如下面这个例子：
这个例子中又增加了三个属性：
接下来再看一个例子：
这里出现两个属性： preloader 告诉了视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。 preloader 有三个属性值可设置：
"none" 不缓冲文件 "auto" 缓冲音频文件 "metadata" 仅仅缓冲文件的元数据 poster 则设定了视频的展示图像，包括播放前的展示图像和下载的展示图像；如果未设定此属性，一般情况下播放前视频区是黑色的。 上面三个例子包含了html5 标签到目前新增的所有属性，整理如下：
height 播放器高度 width 播放器宽度 autoplay 视频准备完毕后自动播放 controls 显示包含“播放”、“进度条”、“全屏”等操作组件的播放控件 loop 设定视频循环播放 muted 静音播放视频 preload 视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。 poster 视频展示的图像，即视频播放前或下载时展示的图像 标签 可以在 标签内使用 标签来指定多个播放文件，来为不同的浏览器提供可支持的编码格式。例如：
浏览器会先加载 2.ogg， 如果不支持ogg格式或视频不存在，则会加载2.MP4，以此类推。
标签里，需要通过 src 来指定文件，通过 type 属性来指定文件格式。
标签 想要指定字幕文件，可以使用 标签；track 使用方式与 source 相同。
标签可以用于规定字幕文件或其他包含文本的文件。
标签属性包括：
src 源文件 kind 指定文件的使用目的，默认值为 subtitles ，可选值包括： subtitles 定义此文件是字幕文件，就是大家熟悉的视频底部字幕了 captions 将在播放器中显示的简短说明 descriptions 视频内容的文本描述，适用于盲人或者视频不可见时的提供的音频描述。 chapters 定义章节，用于导航媒介资源 metadata 提供给脚本使用的内容，对用户不可见 label 为字幕文件指定一个名字，以供浏览器使用；当浏览器需要列出可用的字幕文件时，会使用此名字。 srclang 轨道的语言，若、当 kind 属性值为 "subtitles"时，该属性是必需的 虽然 标签为 video 提供了丰富的文本内容支持，但是目前浏览器对于 track 的支持率很不乐观。
在播放视频时，经常需要对播放进行控制。这时我们就需要使用 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 属性可以控制播放音量。
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)
// Firefox 10+
// W3C 提议
实现全屏效果，只需要调用这些方法即可。
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 还提供了很多事件在上面的例子中并没有用到，就列举在下面，需要丰富功能时可以随时查看~
完整代码ChinTeo/html5videoDemo
以上简单介绍了HTML5中video标签的使用方法。下一篇文章计划介绍video事件相关内容。想要进行更深入的了解可以在此查看文档。