javascript - html5视频将黑框（空）绘制到画布

Question

我正在动态加载第一帧小视频元素并将其绘制到更大的画布上。（当您将鼠标悬停时它会播放它们）它通常可以工作（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
        });