2016-05-31 76 views
2

我想只在视频中播放一半的视频,但在对角线上截断。 目前,我可以用这个小的JavaScript在画布easyli发挥我的完整视频:在画布上播放视频的一部分

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方法对每个视频),但每个将被削减对角,来呈现这样的事情:

enter image description here

我再要移动取决于鼠标位置的分隔符。

+0

你想做到这一点的目的是什么,你为什么不修改的一些视频编辑软件的视频剪辑,并发挥你的页?或者您正在尝试创建在线视频编辑器? :) –

+0

我忘记了一点,我希望能够根据鼠标位置移动对角线。我正在提出这个问题:) – jbuiss0n

回答

4

您可以使用组合来实现此目的。

组合物使用alpha通道以各种方式组合非alpha数据,例如“source-in”将绘制存在像素的源图像/视频,而“destination-over”将保留现有像素是非alpha的,只在有alpha的地方绘制新的(这些也被称为Porter-Duff or alpha composition。混合属于同一个伞,但与合成目的不同)。

有许多模式,但上面提到的将允许我们将它们组合起来,通过定义一个用作两者的掩码的alpha区域来获得我们想要的部分。我将包括概述,说明如何为每种模式的运营商合作,以更好地了解他们在做什么(从Wikipedia):

Comp modes
(A =源,B =目的地)

的在这种情况下所需的步骤是:

  • 初始化用组合物模式“source-over”,因为我们使用这种在循环
  • 个清除画布,以确保我们有一个alpha通道与
  • 工作使用“source-in”顶部对角线相对的一半绘制到鼠标位置
  • 抽奖视频源2(将其放置在左侧)
  • 使用“destination-over

工作实施例

这将加载两种不同的视频(链接从here借用)中并加载时建立环路如上所述的顶部绘制视频源1(只是给视频几秒钟加载):

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>

+0

从来没有听说过这个作品,它有点棘手,即使在阅读了这个文档两次后,我不确定要理解这里发生了什么:D 但是使用这个解决方案,我只看到1个视频,并且只要我移动鼠标,就不会再有视频:( – jbuiss0n

+0

@ jbuiss0n oops,忘记为掩码设置初始编辑模式(source-over)。renderFrame()也必须在每帧当然被调用 – K3N

+0

@ jbuiss0n也添加了实际的视频源,以显示它按预期工作(只需给视频一些时间来加载...) – K3N