HTML 5个视频播放后黑屏

Question

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

It is set to play only once i.e it doesn't loop.

视频播放完毕后，只是黑屏。我试过添加 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

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

海报

A 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个视频播放后黑屏

HTML 5 video shows black screen after video plays

html

html5-video

海报