HTML 5视频播放后显示黑屏



我在<video>标签中加载了一个视频。

它被设置为只播放一次,即不循环。

视频播放结束后,只显示黑屏。我已经尝试添加poster属性,但据我所知,这是在视频加载之前使用的,而不是在视频加载之后。大多数可用的解决方案都是在视频之前而不是之后防止这种黑屏,而且它们不涉及单次播放的视频。

  1. 我该如何防止这个黑屏显示
  2. 视频播放结束后,我可以添加另一个图像或视频的第一帧吗

<video width="400" autoplay="" muted="" playsinline="" class="" style="max-width:100%;padding:0px;" poster="//cdn.shopify.com/s/files/1/0017/4227/4613/files/COST-GRAPH_450x.png?v=9334525452384790062">
<source src="https://cdn.shopify.com/s/files/1/0017/4227/4613/files/CG1.25X_compressed.mp4?v=1596956587" type="video/mp4">
</video>

因为视频源的最后一帧是黑色的。

海报

下载视频时要显示的图像的URL。如果未指定此属性,则在第一个帧可用之前不显示任何内容,然后第一个帧显示为海报帧。

下面是一个例子,最后一帧还可以。这是你想要的吗?

<video controls width="250">
<source src="https://interactive-examples.mdn.mozilla.net/media/examples/flower.mp4"
type="video/mp4">
Sorry, your browser doesn't support embedded videos.
</video>

最新更新