世界知最

没有过时的技术,只有过时的人

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>
阅读更多
版权声明:可以转发 https://blog.csdn.net/a419419/article/details/79318125
个人分类: canvas
想对作者说点什么? 我来说一句

html5canvas播放视频

2016年05月16日 2.21MB 下载

canvas 录制视频和播放

2016年03月09日 860KB 下载

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

不良信息举报

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

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭