HTML5视频:画布镜慢
HTML5视频:画布镜慢
提问于 2019-05-22 13:12:53
我的功能运行良好，但经过几个循环之后，它的速度减慢了，“镜像”视频有点结巴。
是使它更快/更顺畅的方法吗？
我想了解一下，如果我选择了正确的方式来镜像这些视频。
我有剪辑路径的css，他们必须是3，其中我有视频镜像。首先看起来很不错，但是经过几个循环之后，镜像视频运行得很慢，
请帮帮忙。
document.addEventListener('DOMContentLoaded', function(){
var v = document.getElementById('video1');
var canvasBottom = document.getElementById('mycanvasbottom');
var canvasLeft = document.getElementById('mycanvasleft');
var canvasRight = document.getElementById('mycanvasright');
var contextB = canvasBottom.getContext('2d');
var contextL = canvasLeft.getContext('2d');
var contextR = canvasRight.getContext('2d');
var cw = 640;
var ch = 480;
canvasBottom.width = cw;
canvasBottom.height = ch;
canvasLeft.width = cw;
canvasLeft.height = ch;
canvasRight.width = cw;
canvasRight.height = ch
v.addEventListener('timeupdate', function(){
draw(this,contextL,cw,ch);
draw(this,contextR,cw,ch);
draw(this,contextB,cw,ch);
},false);
},false);
function draw(v,c,w,h) {
if(v.paused || v.ended) return false;
c.drawImage(v,0,0,w,h);
setTimeout(draw,20,v,c,w,h);
}#mycanvasbottom {
position: absolute;
margin: 0 auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 75%;
height: 75%;
-webkit-filter: grayscale(1);
clip-path: polygon(0 100%, 50% 50%, 100% 100%);
}
#mycanvasleft {
position: absolute;
margin: 0 auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 75%;
height: 75%;
-webkit-filter: grayscale(1);
clip-path: polygon(0 0, 50% 50%, 0 100%);
}
#mycanvasright {
position: absolute;
margin: 0 auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 75%;
height: 75%;
-webkit-filter: grayscale(1);
clip-path: polygon(100% 0, 50% 50%, 100% 100%);
}
#video1 {
position: absolute;
left: 0;
}<canvas id='mycanvasbottom' ></canvas>
<canvas id='mycanvasleft' ></canvas>
<canvas id='mycanvasright' ></canvas>
<video id='video1' autoplay muted loop width='320' >
<source src="http://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4" />
</video>
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-05-23 09:16:51
首先，"timeupdate“事件被多次触发--因此您实际上调用的次数比您想要的要多得多。这就是为什么它开始滞后的原因--许多操作是每秒执行的。您可能会听到“播放”和“暂停”事件(在play()和pause()方法被执行后触发；"play“事件在视频开始时也会被调用，因此您不必手动调用它，它无论如何都会被触发)。然后您可以手动处理绘图循环。这应该可以解决你的问题(我能够复制，它解决了慢速效应)。
此外，以下是一些您可能会考虑的建议：
- 不要在动画中使用setTimeout()，特别是在玩画布时。阅读window.requestAnimationFrame()，这要好得多，并考虑使用它。
- 您可以考虑在该代码中进行许多优化，例如在代码中生成画布元素(以消除rid )，使用Object.assign()向同一行的对象添加多个属性，引入循环。该代码的数量将急剧减少。这不是必须的，但是保持代码质量总是很好的。简单地说，未来的工作就少了。
祝你今天愉快！
编辑:不要误解我的意思，有些只是关于个人喜好。在大量使用js之后，我喜欢保持简单，就像在这个片段中一样。享受免费密码！
let lastAnimationFrameRequestId = 0;
document.addEventListener('DOMContentLoaded', function () {
const cw = 640;
const ch = 480;
const video = document.getElementById('video1');
const canvases = [];
const clipPaths = [
'clip-path: polygon(0 100%, 50% 50%, 100% 100%)',
'clip-path: polygon(0 0, 50% 50%, 0 100%);',
'clip-path: polygon(100% 0, 50% 50%, 100% 100%)'
];
clipPaths.forEach((clipPath) => {
const canvas = Object.assign(document.createElement('canvas'), { className: 'my-canvas', style: clipPath, width: cw, height: ch });
canvases.push(canvas);
document.body.appendChild(canvas);
});
video.addEventListener('play', () => window.requestAnimationFrame(() => draw(video, canvases)));
video.addEventListener('pause', () => window.cancelAnimationFrame(lastAnimationFrameRequestId));
});
function draw(video, canvases) {
canvases.forEach((canvas) => {
canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
});
lastAnimationFrameRequestId = window.requestAnimationFrame(() => draw(video, canvases));
}.my-canvas {
position: absolute;
margin: 0 auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 75%;
height: 75%;
-webkit-filter: grayscale(1);
}<video id='video1' autoplay muted loop width='320'>
<source src="http://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4" />
</video>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56257683
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号