html5视频将黑框(空）绘制到画布上

html5 video draws black box (empty) to canvas

本文关键字：绘制 视频 html5      更新时间：2023-09-26

我正在动态加载第一帧小视频元素，并将其绘制到更大的画布上。（当你滚动播放时）它通常有效（90%的时间），但有时随机地，其中一个或另一个视频会画一个黑框，表示从视频中采样的图像数据是空的。

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

例如：

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

但以上内容偶尔看似随机，却一片空白？

有什么想法吗？我也尝试过：onloadeddata和canplay，但它们的可靠性更低

我觉得空白帧的原因是，即使是一秒的视频也包含很多帧。因此，它可能在中间包含一个空白框架。我觉得这件事可以继续进行下去是恰当的。您可以修改采样逻辑。

 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
        });
相关文章：