canvas如何简单粗暴地载入视频

canvas加载视频和图片是一样的,使用drawImage,区别就是给一个定时器不停的抓取每帧的画面,放入Canvas画布里面,这个办法十分的简单粗暴。(粗粗粗粗~~~)
这里写图片描述
而且可以达到神同步,当视频暂停,canvas里面的视频就暂停,当视频再次开始播放,canvas里面的视频也再次播放。
html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
</head>
    <body>
        <video id="video1"  width="270" autoplay src="11.mp4"></video>
        <canvas id="myCanvas" width="270" height="135"></canvas>
    </body>
</html>

js:

 <script>
 var v = document.getElementById("video1");
 var c = document.getElementById("myCanvas");
     ctx = c.getContext('2d');
     //每20毫秒画一次图
     v.addEventListener('play', function() {
         var i = window.setInterval(function() {
             ctx.drawImage(v, 0, 0, 270, 135);
             //打印当前视频的播放时间
             console.log(v.currentTime);
             //当视频结束的时候去掉循环
             if(v.ended){
                clearInterval(i)
            }
         }, 20);
     }, false);
     //将视频暂停,然后观察canvas里面的效果
     setTimeout(function(){
        v.pause();
     },4000);
     //将视频播放,然后观察canvas里面的效果
     setTimeout(function(){
        v.play();
     },7000)
 </script>
阅读更多

扫码向博主提问

不亏

天道酬勤
去开通我的Chat快问

没有更多推荐了,返回首页