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

刺骨的言语ヽ痛彻心扉 2022-05-31 08:07 263阅读 0赞

canvas加载视频和图片是一样的，使用drawImage，区别就是给一个定时器不停的抓取每帧的画面，放入Canvas画布里面，这个办法十分的简单粗暴。（粗粗粗粗~~~）  
![这里写图片描述][70]  
而且可以达到神同步，当视频暂停，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>

[70]: /images/20220531/cda4f98959d646ca91dc9b88457c3674.png

发表评论取消回复

表情：

评论列表（有 0 条评论，263人围观）

还没有评论，来说两句吧...

相关阅读

相关如何动态载入CSS

动态载入CSS的两种方法 1.通过文档对象创建 link节点,指定 href,然后 appendChild到页面. 这种方案大家都用过, 不过,会存在一些问题.什么问

我就是我/ 2024年04月03日 14:13/ 0 赞/ 22 阅读

相关 java canvas类播放视频教程_canvas实现视频播放

Examples 点击播放 var imgArr = \[\], source = \{\}, now2 = 0, imgNum = 0, timer = null

╰+攻爆jí腚メ/ 2022年11月05日 00:39/ 0 赞/ 219 阅读

相关 H5 canvas如何载入视频

Canvas可以载入图片，那么Canvas 也可以载入视频。 Canvas加载视频和图片是一样的，使用drawImage，区别就是给一个定时器不停的抓取每帧的画面，放入C

男娘i/ 2022年07月16日 13:53/ 0 赞/ 157 阅读

相关 TortoiseGit教程（简单粗暴版）

1.首先安装git 2.然后安装TortoiseGit 3.直接打开git bash 输入命令也是可以的 \-----------第一次用git提交代码的时候要设置“我

桃扇骨/ 2022年07月14日 07:26/ 0 赞/ 157 阅读

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

canvas加载视频和图片是一样的，使用drawImage，区别就是给一个定时器不停的抓取每帧的画面，放入Canvas画布里面，这个办法十分的简单粗暴。（粗粗粗粗~~~）

刺骨的言语ヽ痛彻心扉/ 2022年05月31日 08:07/ 0 赞/ 264 阅读

相关简单粗暴地理解js原型链--js面向对象编程

原型链理解起来有点绕了，网上资料也是很多，每次晚上睡不着的时候总喜欢在网上找点原型链和闭包的文章看，效果极好。不要纠结于那一堆术语了，那除了让你脑筋拧成麻花，真的不能帮你什

爱被打了一巴掌/ 2022年05月29日 12:55/ 0 赞/ 86 阅读

相关简单粗暴地理解js原型链--js面向对象编程

原型链理解起来有点绕了，网上资料也是很多，每次晚上睡不着的时候总喜欢在网上找点原型链和闭包的文章看，效果极好。不要纠结于那一堆术语了，那除了让你脑筋拧成麻花，真的不能帮你什

小灰灰/ 2022年05月15日 01:48/ 0 赞/ 100 阅读

相关简单粗暴的JavaScript笔记-1

![标题图][1240] > 欢迎到我的简书查看我的文集前言: > 提示密码提示框 <head> <style> div1 {width:

以你之姓@/ 2021年09月17日 04:16/ 0 赞/ 231 阅读

相关简单粗暴地理解 JS 原型链

原型链理解起来有点绕了，网上资料也是很多，每次晚上睡不着的时候总喜欢在网上找点原型链和闭包的文章看，效果极好。不要纠结于那一堆术语了，那除了让你脑筋拧成麻花，真的

向右看齐/ 2021年09月14日 13:42/ 0 赞/ 195 阅读

相关简单粗暴地理解js原型链–js面向对象编程

简单粗暴地理解js原型链–js面向对象编程 -------------------- 作者：茄果链接：[http://www.cnblogs.com/qieguo

系统管理员/ 2021年09月14日 00:32/ 0 赞/ 204 阅读