愿时光能在字里行间里留下一些温暖的印记

video转canvas播放

由于狗日的微信擅自修改了微信浏览器内核,并立下了很多sb的规则来提升他们的kpi,结果他还没权利修改ios浏览器内核,所以导致微信H5内视频交互很是头疼,只好用障眼法,把视频渲染到画布上去完成交互

 

html代码

 
    

js代码

 function bb(){

        document.getElementById("vvideo").play();
    } 
    var w = window.innerWidth;
    var h = window.innerHeight; 
    console.log(w,h);
   

            //获取video
var TestVideo=document.getElementById("vvideo");
//获取canvas画布
var TestCanvas=document.getElementById("testCanvas");
//设置画布
var TestCanvas2D=TestCanvas.getContext('2d');
//设置setinterval定时器
var TestVideoTimer=null;
//监听播放
TestVideo.addEventListener('play',function() {
    TestVideoTimer=setInterval(function() {
        TestCanvas2D.drawImage(TestVideo,0,0,w,h);
    },20);
},false);
//监听暂停
TestVideo.addEventListener('pause',function() {
    clearInterval(TestVideoTimer);
},false);
//监听结束
TestVideo.addEventListener('ended',function() {
    clearInterval(TestVideoTimer);
    console.log('播放结束了');
},false);


点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注