Question

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

设置为只能播放一次，即不会循环播放。

视频播放完毕后，只会显示黑屏。我尝试添加poster属性，但是据我了解，该属性在视频加载之前而不是之后使用。可用的大多数解决方案都是为了防止在视频播放之前出现黑屏，而不是在视频播放之后出现黑屏，而且它们也不会处理单播放视频。

如何防止显示黑屏？
视频播放完毕后，我可以添加其他图像还是视频的第一帧吗？

<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>

Answer 1

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

海报

下载视频时要显示的图像的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>

播放视频后，HTML 5视频显示黑屏

1 个答案:

海报