javascript - html5视频将黑框(空)绘制到 Canvas 上

Question

我正在动态加载第一帧小视频元素并将其绘制到更大的 Canvas 上。 (当您将鼠标悬停时，它会播放它们)它通常可以工作(90% 的时间)，但有时一个或另一个视频会随机绘制一个黑框，表示从视频中采样的图像数据为空。

我的做法是在每个视频上使用 canplaythrough 事件来确定视频是否已准备好进行采样，但我想知道是否应该有更好的事件正在使用？

例如:

myvid.addEventListener("canplaythrough",function()
        {
            //do the sampling now
        });

但是上面偶尔会出现看似随机的空白？

有什么想法吗？我也尝试过:onloadeddata 和 canplay 但这些更不可靠

Answer 1

我觉得出现空白帧的原因是，即使是一秒钟的视频也包含很多帧。因此它之间可能包含一个空白帧。我觉得这个事件canplaythrough是合适的。您可以修改采样逻辑。

 myvid.addEventListener("canplaythrough",function()
        {
           //check the intensity of some pixels of sample if they are blank. If blank then raise canplaythrough event
//else do the sampling now
        });