1.视频支持格式。
有3种视频格式被浏览器广泛支持：.ogg,.mp4,.webm.
Theora+Vorbis=.ogg (Theora:视频编码器，Vorbis：音频编码器)
H.264+$$$=.mp4 (H.264:高清视频标准)
VP8+Vorbis=.webm(webm是新的开源视频标准，基于VP8编码器)
| 平台 | .ogg | .mp4 | .webm |
| Andorid | ❌ | ❌ | |
| FirFox | ❌ | ❌ | |
| Chrome | ❌ | ❌ | |
| iPhone | ❌ | ||
| IE9 | ❌ | ||
| Opera | ❌ | ❌ | |
| Safari | ❌ |
可见，没有任何一个格式能够支持所有浏览器，所以我们需要引入3中格式的视频。
<video id="ivideo" width="320" height="640"> <source src="test.webm" type='video/webm;codecs="vp8,vorbis"'> <source src="test.mp4" type='video/mp4;codecs="arc1.42E01E,mp4a.40.a"'> <source src="test.ogg" type='video/ogg;codecs="thera,vorbis"'> </video>
2.video属性
autoplay：true or false；是否自动播放
loop：true or false；是否循环播放
volume：0~1数字；播放音量
poster：加载视频时显示的图片url。
duration：视频长度（s）
currentTime：视频当前播放时间（s）
ended：根据视频是否播放结束，返回true or false，
muted：查询播放中的视频是否静音，返回true or false
paused：查询视频当前是否被暂停，返回true or false
方法：
play():启动播放
pause():暂停
3.预加载视频
为视频加载添加预加载动画
<div id="preload">0%</div>
这里要知道两个htmlvideo元素的事件：
progress：在视频对象更新加载进度时触发该事件，用于更新进度文字
canplaythrough：在视频已加载足够播放全部视频数据时触发，用于确定什么时候播放视频。
load事件firefox不支持，chrome&ie10不触发progress事件
监听加载百分比函数：
function progress（）{
var loadingStatus=document.getElementById("loadingstatus");
var videoEle=document.getElementById("ivideo");
var percent=parseInt((videoEle.buffered.end(0)/videoEle.duration)/100);
loadingStatus.innerHtml=percent+'%';
}
4.js判断浏览器可用视频格式
video的另一个方法：canPlayType(),返回一个文本字符串：maybe,probably,''
function supportVideoType(video){
var returnType="";
if(video.canPlayType("video/webm")=="probably"||video.canPlayType("video/webm")=="maybe"){
returnType="webm";
}else if(video.canPlayType("video/mp4")=="probably"||video.canPlayType("video/mp4")=="maybe"){
returnType="mp4";
}else if(video.canPlayType("video/ogg")=="probably"||video.canPlayType("video/ogg")=="maybe"){
returnType="ogg";
}
return returnType;
使用标签方式引入video只能支持播放、暂停等功能，如果需要旋转、添加文字等特殊效果，则需要和canvas一起使用。