序员必知的HTML5 video视频二三事
HTML5支持直接播放视频，而这背后涉及到复杂的视频格式之争，甚至还牵涉到所有的电子影像设备？在过去乃至现在，flash仍是网页上最好的解决视频的方法，诸如优酷、土豆之流的视频网站、还有像虾米那样的在线音乐网站，仍在使用flash提供播放服务。现在这种状况将会随着 HTML5 的发展而改变。HTML <video> 适用于HTML 5+，用于定义在线观看的视频流媒体。
HTML5 (视频)- 如何工作
如需在 HTML5 中显示视频，您所有需要的是：
实例
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的浏览器不支持Video标签。
</video>
尝试一下 »
在过去，音视频需要通过第三方插件来处理（这样引发的问题是：并不是所有操作系统或者设备都能使用）流览器与插件之间的通信被局限住了，而且多媒体就像一个黑盒子。HTML5出现之后，所有主流浏览器都可以支持本地音视频了（包括IE浏览器），虽然这个过程需要让您的媒体文件进行双份的编码（因为IE 和Safari只支持Royalty-encumbered标准的编码）。有了HTML5，突然之间，video可以跟CSS一起排样式了：您可以用半透 明的视频相互覆盖，设置边界与背景图片，旋转盘旋等变换，以及其他各种精彩的变形应用。
但是，有一个核心问题，却没有得到解决。HTML5没有规定，浏览器到底应该播放哪一种格式的视频。浏览器厂商可以自行选择支持的格式。
怎么让所有浏览器支持HTML5 video视频标签？
1、提前准备好多格式视频文件
由于编码器的版权问题，导致不同浏览器对视频格式的兼容性不同。目前没有一个视频格式兼容所有浏览器，唯一的解决方法就是把视频转换成多种格式。
首先要准备一个 mp4 格式的视频，可以在苹果设备中使用；其次要准备 ogv 格式的视频，用在火狐浏览器中；最后要准备一下 webm 格式的视频，这个可以用在谷歌浏览器等。webm 是谷歌提出的，开源、免费，很有可能成为兼容所有浏览器的视频格式。
准备多格式浏览器的麻烦之处在于转换格式。视频转换工具国内的功能比较少，转换格式可能没有上面后两个，而且质量良莠不齐，往往需要注册才能使用。推荐一个国外的工具 Online converter ，在线免费视频转换工具。甚至不用安装软件，直接选择相应的目标格式，然后上传视频，配置一下参数就可以转换出来了。没有合适工具的朋友，可以尝试一下。
2、编写对应 HTML5 video 代码
HTML5 中的 video 实际上就是一个简单的标签，包含了一些视频相关信息等。下面直接给出具体代码，然后简单解释一下：
XML/HTML Code
<video width=”800” height=”374”>
<source src=”my_video.mp4” type=”video/mp4” />
<source src=”my_video.ogv” type=”video/ogg” />
<source src=”my_video.webm” type=”video/webm” />
你浏览器不支持 video 功能，点击这里下载视频： <a href=”video.webm”>下载视频</a>.
</video>
video 标签表示这里是一个视频，width、height 属性分别表示这个视频内容的宽高（单位像素）。video 标签中可以包含 source 标签，source 标签用来表示引用的视频和视频的格式、类型。为了保证向下的兼容性，我们还在 video 标签中加了一句提示，这句话在支持 video 标签的浏览器中是不会显示的，如果不支持就会显示出来。这里，还增加了一个视频的下载地址，如果浏览器不支持，可以让用户选择下载下来看。
特别需要注意一点，你的主机必须能正确的处理这事些视频请求。确保你的主机被请求这些视频的时候会在 Content-Type 头发送正确的 MIME 类型。如果你不清楚，可以咨询一下主机服务商，也可以自己添加。如果主机支持 .htaccess ，可以在 .htaccess 文件中增加下面语句：
代码如下:
AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm
大体就是这样，比较简单，更加具体的关于 video 的使用方法，可以搜索一下，在这里不再赘述。
3、为旧版浏览器做兼容
前面说过，如果浏览器不支持 video ，将会把 video 中的提示内容显示出来。那么对付老旧浏览器，我们可以用传统的 flash 来替换这个提示内容。这样，当浏览器不兼容 video 标签的时候，就会显示出 flash 版本的视频。例如：
XML/HTML Code
<video width=”800” height=”374”>
<source src=”my_video.mp4” type=”video/mp4” />
<source src=”my_video.ogv” type=”video/ogg” />
<object width="800" height="374" type="application/x-shockwave-flash" data="fallback.swf">
<param name="movie" value="fallback.swf" />
<param name="flashvars" value="autostart=true&file=video.flv" />
</object>
</video>
直接按照原来正常的 flash 引入方法写进 video 标签中即可。这样，我们就实现了跨浏览器兼容的 video 功能使用。
html5 video 试看怎么实现？
代码示例：
var vList = ['视频地址url1', 'url2', '...']; // 初始化播放列表
var vLen = vList.length; // 播放列表的长度
var curr = 0; // 当前播放的视频
var video = new Video();
video.addEventListener('end', play);
play();
function play(e) {
video.src = vList[curr];
video.load(); // 如果短的话，可以加载完成之后再播放，监听 canplaythrough 事件即可
video.play();
curr++;
if (curr >= vLen) curr = 0; // 播放完了，重新播放
}
怎么实现 html5 video 视频暂停后加载指定的图片？
html5 video fullScreen全屏实现方式
<html>
<head>
<meta charset="utf-8" />
<title>全屏问题</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta http-equiv="imagetoolbar" content="no"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<style type="text/css">
*{
padding: 0px;
margin: 0px;
}
body div.videobox{
width: 400px;
height: 320px;
margin: 100px auto;
background-color:#000;
}
body div.videobox video.video
{
width: 100%;
height: 100%;
}
:-webkit-full-screen {
}
:-moz-full-screen {
}
:-ms-fullscreen {
}
:-o-fullscreen {
}
:full-screen {
}
:fullscreen {
}
:-webkit-full-screen video {
width: 100%;
height: 100%;
}
:-moz-full-screen video{
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="videobox">
<video controls="controls" preload="preload" id="video" poster="poster.jpg">
<source src="./movie.ogg" type="video/ogg" />
<source src="./movie.mp4" type="video/mp4" />
<source src="./movie.webm" type="video/webm" />
<object data="./movie.mp4" width="100%" height="100%">
<embed width="100%" height="100%" src="./movie.swf" />
</object>
</video>
<button id="fullScreenBtn">全屏</button>
</div>
<script type="text/javascript">
//反射調用
var invokeFieldOrMethod = function(element, method)
{
var usablePrefixMethod;
["webkit", "moz", "ms", "o", ""].forEach(function(prefix) {
if (usablePrefixMethod) return;
if (prefix === "") {
// 无前缀，方法首字母小写
method = method.slice(0,1).toLowerCase() + method.slice(1);
}
var typePrefixMethod = typeof element[prefix + method];
if (typePrefixMethod + "" !== "undefined") {
if (typePrefixMethod === "function") {
usablePrefixMethod = element[prefix + method]();
} else {
usablePrefixMethod = element[prefix + method];
}
}
});
return usablePrefixMethod;
};
//進入全屏
function launchFullscreen(element)
{
//此方法不可以在異步任務中執行，否則火狐無法全屏
if(element.requestFullscreen) {
element.requestFullscreen();
} else if(element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if(element.msRequestFullscreen){
element.msRequestFullscreen();
} else if(element.oRequestFullscreen){
element.oRequestFullscreen();
}
else if(element.webkitRequestFullscreen)
{
element.webkitRequestFullScreen();
}else{
var docHtml = document.documentElement;
var docBody = document.body;
var videobox = document.getElementById('videobox');
var cssText = 'width:100%;height:100%;overflow:hidden;';
docHtml.style.cssText = cssText;
docBody.style.cssText = cssText;
videobox.style.cssText = cssText+';'+'margin:0px;padding:0px;';
document.IsFullScreen = true;
}
}
//退出全屏
function exitFullscreen()
{
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if(document.oRequestFullscreen){
document.oCancelFullScreen();
}else if (document.webkitExitFullscreen){
document.webkitExitFullscreen();
}else{
var docHtml = document.documentElement;
var docBody = document.body;
var videobox = document.getElementById('videobox');
docHtml.style.cssText = "";
docBody.style.cssText = "";
videobox.style.cssText = "";
document.IsFullScreen = false;
}
}
document.getElementById('fullScreenBtn').addEventListener('click',function(){
launchFullscreen(document.getElementById('video'));
window.setTimeout(function exit(){
//檢查瀏覽器是否處於全屏
if(invokeFieldOrMethod(document,'FullScreen') || invokeFieldOrMethod(document,'IsFullScreen') || document.IsFullScreen)
{
exitFullscreen();
}
},5*1000);
},false);
</script>
</body>
</html>
html5 video封面poster图片填充方法
html5的video属性并没有支持处理poster的尺寸问题，有一个hacker的方法：The answer is actually quite simple. Instead of providing our poster image as a value to the poster attribute, we define it as a background image for our video element, and use the background-size property to tell the browser that the image is to cover the element in question:
将poster页面设置为一个透明的图片或者不存在的值，这样浏览器就会无法显示poster，然后通过设置播放器的css背景background，将我们需要的背景图放进去，并且填充背景，并且我们用background-size属性去告诉浏览器，这个播放器或者这个元素被这个图片覆盖。
video{
width: 100%;
height: 100%;
background:transparent url('img/1.jpg') 50% 50% no-repeat;
//下面就是background-size，每种浏览器都写一个配置
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
}
详细代码：
< !DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title></title>
<style type="text/css">
.video-container1{
width: 400px;
height: 400px;
border: solid;
}
.video1{
width: 100%;
height: 100%;
}
.video-container2{
width: 400px;
height: 400px;
border: solid;
}
.video2{
width: 100%;
height: 100%;
background:transparent url('1.jpg') 50% 50% no-repeat;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
}
</style>
</head>
<body>
<div class="video-container1">
<video class="video1" src="oceans.mp4" poster="1.jpg" controls>
</video>
</div>
<div class="video-container2">
<video class="video2" src="oceans.mp4" poster="2.jpg" controls>
</video>
</div>
</body>
</html>