利用h5标签video来播放视频

电脑端和手机端都可以用： //webm视频格式是稳定支持的，格式工厂提前转码

标签：

设置好标签还要初始化一下视频屏幕大小，可以参考：

js获取手机屏幕宽度、高度
网页可见区域宽：document.body.clientWidth 
网页可见区域高：document.body.clientHeight 
网页可见区域宽：document.body.offsetWidth (包括边线的宽) 
网页可见区域高：document.body.offsetHeight (包括边线的宽) 
网页正文全文宽：document.body.scrollWidth 
网页正文全文高：document.body.scrollHeight 
网页被卷去的高：document.body.scrollTop 
网页被卷去的左：document.body.scrollLeft 
网页正文部分上：window.screenTop 
网页正文部分左：window.screenLeft 
屏幕分辨率的高：window.screen.height 
屏幕分辨率的宽：window.screen.width 
屏幕可用工作区高度：window.screen.availHeight 
屏幕可用工作区宽度：window.screen.availWidth 

调用代码：function videoPlay(videoUrl,coverImgUrl){
	 var player=document.getElementById("player");
	 player.setAttribute("height", $(window).height()+"");
	 player.setAttribute("width", $(window).height()/9*16+"");
	 player.setAttribute("poster", coverImgUrl+"");
	 player.setAttribute("volume", "0.5");
	 player.setAttribute("src", videoUrl+"");
	//player.play();player.pause();//播放和暂停}

获取实时播放进度：
    function getVideoprogress() {
    setTimeout(function () {
    var vid = document.getElementById("player");
    var currentTime=vid.currentTime.toFixed(1);
    if(currentTime==1200){
    // 触发
    return false;
    }
    console.log(currentTime);
    getVideoProgress();
    }, 50);
    }

视频加载之后先获取总时长，要用到video的一个事件-loadedmetadata，这个事件的触发表示元数据（媒体的一些基本信息）已经加载完成。

用addEventListener监听事件：

var myVideo = document.getElementById('player');// 获取video元素
var tol = 0;
myVideo.addEventListener("loadedmetadata", function() {
tol = myVideo.duration;//获取总时长
console.log("总时长："+tol);
});

设置断点续播:需要监听一个事件和获取一个属性的值，那么用到的是video的timeupdate事件和currentTime属性

//播放时间点更新时
myVideo.addEventListener("timeupdate", function(){
var currentTime = myVideo.currentTime;//获取当前播放时间
console.log(currentTime);//在调试器中打印
});

//设置播放点，续播
function playBySeconds(num){ 
    myVideo.currentTime = num;
}

//音量改变时
myVideo.addEventListener("volumechange", function(){
    var volume = myVideo.volume;//获取当前音量
console.log(volume);//在调试器中打印
});

//设置音量
function setVol(num){ 
    myVideo.volume = num;
}

进度控制，禁止随意快进：

	var video = document.getElementById("player");
	var last=0;
	//当目前的播放位置已更改时  （禁止随意快进）
    video.ontimeupdate = function () {  
        var current = video.currentTime;  
        if(current - last > 2) {  
            video.currentTime = last;  
        } else {  
        last = current;  
        }  
    };