在画布中播放视频的一部分

本文介绍了在画布中播放视频的一部分的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 29岁程序员，3月因学历无情被辞！ 我想在画布上只播放一半视频，但在对角线上截断。 目前我可以使用这个小小的javascript在画布上播放我的完整视频：I would like to play only half of my video on a canvas but truncated on the diagonal.At the moment I can play my full video in a canvas easyli using this little javascript:var video = document.getElementById('video');var canvas = document.getElementById('canvas');var context = canvas.getContext('2d');var drawFrame = function drawFrame() { context.drawImage(video, 0, 0, canvas.width, canvas.height); requestAnimationFrame(drawFrame);};requestAnimationFrame(drawFrame);最后，我希望能够同时播放2个视频（我只是必须在每个视频上调用drawImage），但每个都将在对角线上剪切，以呈现如下内容：In the end, I want to be able to play 2 videos, at the same time (I just have to call drawImage on each video), but each will be cut on diagonal, to render something like this:然后我想根据鼠标位置移动分隔符。I then want to move the separator depending on the mouse position.推荐答案 您可以使用合成来实现此目的。合成使用Alpha通道以各种方式合并非alpha数据，例如source-in将绘制存在像素的源图像/视频，而destination-over将保留现有像素，其中存在非alpha并且仅绘制具有alpha的新图像（这些也称为 Po rter-Duff或alpha组合。混合是在同一个伞下，但目的与合成不同。Compositions uses the alpha channel to combine non-alpha data in various way, for example "source-in" will paint source image/video where there exist pixels while "destination-over" will keep the existing pixels where there is non-alpha and only paint new ones where there is alpha (these are also known as Porter-Duff or alpha composition. Blending comes under the same umbrella but has a different purpose than compositing).有很多模式，但上面提到的模式将允许我们将它们组合起来得到我们的部分只想定义一个作为两者掩模的alpha区域。我将包含一个概述，以显示运营商如何为每种模式工作，以更好地了解他们的工作（来自 Wikipedia ）：There are many modes but the above mentioned ones will allow us to combine them to get the part we want just by defining an alpha region that function as a mask for both. I'll include an overview to show how the operators work for each mode to better understand what they do (from Wikipedia): （A =来源，B =目的地） 此案例所需的步骤为： 使用合成模式初始化 source-over ，因为我们在循环中使用它 清除画布到确保我们有一个alpha通道可以使用 相对于鼠标位置绘制对角线一半 使用 source-in （将其置于左侧） 使用目的地在顶部绘制视频源1 -overInitialize with composition mode "source-over" as we use this in a loopClear canvas to make sure we have an alpha channel to work withDraw diagonal half relative to the mouse positionDraw video source 2 on top using "source-in" (to place it at the left side)Draw video source 1 on top using "destination-over"钍将加载两个不同的视频（从这里借来的链接）和loading如上所述设置循环（只需加载视频几秒钟）：This will load two different videos (links borrowed from here) and when loaded sets up the loop as described above (just give the videos a few seconds to load):var ctx = c.getContext("2d"), pos = c.width * 0.5, count = 2;ctx.fillText("Please wait while videos are loading...", 20, 20);video1.oncanplay = video2.oncanplay = function() {if (!--count) renderFrame()};function renderFrame() { ctx.globalCompositeOperation = "source-over"; ctx.clearRect(0, 0, c.width, c.height); // makes sure we have an alpha channel ctx.beginPath(); // draw diagonal half ctx.moveTo(0, 0); ctx.lineTo(pos - 50, 0); ctx.lineTo(pos + 50, c.height); ctx.lineTo(0, c.height); ctx.fill(); // video source 2 ctx.globalCompositeOperation = "source-in"; // comp in source 2 ctx.drawImage(video2, 0, 0, c.width, c.height); // video source 1 ctx.globalCompositeOperation = "destination-atop"; // comp in source 1 ctx.drawImage(video1, 0, 0, c.width, c.height); requestAnimationFrame(renderFrame)}c.onmousemove = function(e) { pos = e.clientX - c.getBoundingClientRect().left;}video {display:none}<canvas id=c width=640 height=400></canvas><video id=video1 muted autoplay loop src="http://media.w3.org/2010/05/sintel/trailer.mp4"></video><video id=video2 muted autoplay loop src="http://media.w3.org/2010/05/video/movie_300.webm"></video> 这篇关于在画布中播放视频的一部分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！