Question

在我的页面上，我播放了一个循环视频。点击播放时，另一个视频会被屏蔽，然后慢慢显示。简而言之，我正在使用另一个视频（黑色/白色蒙版被Canvas变成alphadata）来屏蔽视频。

这很有效，但转换/视频速度令人难以置信，因为画布循环遍历所有像素。有没有人在另一种方式上有任何指示来完成这个或加快这个过程？

A working demo of this code can be found here

HTML：

//Buffer canvas (stacked video's: result + alpha mask)
<canvas style="display:none" width="1920" height="2160" id="buffer">     
</canvas>

//Output canvas (combines mask with video)
<canvas class="video__output " width="1920" height="1080" id="output">
</canvas> 

//buffer canvas uses this video to extract data
<video class="" id="video" preload="auto" style="display:none" >
    <source src="assets/video/masking.mp4" type='video/mp4;codecs="avc1.42E01E"' />
</video>


//Video loop always playing
<video poster="assets/video/poster_desktop.jpg" class="video--top loop" autoplay loop>
    <source src="assets/video/loop.mp4"  type='video/mp4; codecs="avc1.42E01E"' />
</video>

JS：

function processFrame() {
    buffer.drawImage(video, 0, 0);

    //Get alphadata
    let image = buffer.getImageData(0, 0, width, height),
    imageData = image.data,
    alphaData = buffer.getImageData(0, height, width, height).data;

    //Loop through pixels, replace data with alpha channel
    for (let i = 3, len = imageData.length; i < len; i = i + 4) {
        imageData[i] = alphaData[i-1];
    }

    //Output to second canvas
    output.putImageData(image, 0, 0, 0, 0, width, height);
    requestAnimationFrame(processFrame)
}

Answer 1

选项一是将两个getImageData()减少到一个呼叫。获取完整的位图，然后使用两个指针，一个指向RGB数据，第二个指向遮罩数据的开始。

选项二是考虑使用webm视频格式。这有support for alpha channel但目前只支持Chrome浏览器（我认为是较新的Opera）。

画布 - 使用其他视频的Alpha数据屏蔽视频的速度很慢

1 个答案: