当视频加载并且第一帧可见时触发的事件？或者如何以另一种方式交叉淡入淡出两个视频？

Question

我正在尝试在三星智能电视应用程序中使用 video.js，不幸的是，该应用程序一次只能播放一个视频。

我需要模拟两个视频之间的平滑过渡（最好是交叉淡入淡出）。我尝试通过首先淡入下一个视频的屏幕截图并在切换 video.js 插件的视频源时使用它来覆盖屏幕来实现此目的。当播放器准备好后，我需要删除屏幕截图。

我发现的最接近的方法是在调用“loadedmetadata”时删除屏幕截图，但是在删除屏幕截图和播放视频之间，我仍然看到不一致的黑色闪光。这是非常不和谐的，我需要一种一致的方法来仅在第一帧加载到播放器中时删除屏幕截图。

关于如何在仅使用一个视频元素的情况下在两个视频之间实现平滑过渡的任何其他建议将不胜感激。

Answer 1

我发现loadeddata该事件，如MDN上所述：

当媒体的第一帧完成加载时，将触发loadeddata 事件。

loadedmetadata仅宣布加载持续时间等媒体信息，但loadeddata事件应该可以解决问题。