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

刺骨的言语ヽ痛彻心扉 2022-05-31 08:07 336阅读 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 条评论，336人围观）

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

相关阅读

相关 Git初学者快速上手（简单粗暴）

Git初学者快速上手 1.将一个本地的文件（项目）变成git项目进入项目所在目录执行命令（生成下图文件）： git init 此文件中将用于保存本地版本内容（还有

朱雀/ 2023年05月22日 08:50/ 0 赞/ 179 阅读

相关 H5 canvas如何载入视频

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

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

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

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

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

相关 jsonp跨域原理(简单粗暴)

json是一种数据格式。 jsonp 是一种传递数据的方式。简单来说带有 callback 的json 就是jsonp。 ----------------

悠悠/ 2022年06月06日 22:37/ 0 赞/ 282 阅读

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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