HTML5 视频海报不显示 Safari

Question

我的视频海报出现在 Chrome / Firefox 中，但未显示在 Safari 中。我的播放按钮出现，我可以播放视频，但海报没有出现。标记如下。有什么想法吗？

         <video id="video" controls poster="/assets/img/background/simon.jpg">
           <source src="/assets/img/video/want-it.webm"
                   type='video/webm;codecs="vp8, vorbis"'/>
           <source src="/assets/img/video/want-it.mp4"
                   type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"'/>
          <object data="" type="" class="simon">
            <img src='/assets/img/background/simon.jpg' title="Your browser does not support video">
          </object>
         </video>

Answer 1

这是因为它是默认的 Safari 行为，一旦第一帧准备好播放，它们就会加载视频。暂时显示海报的一件事是将视频标签上的

preload

属性设置为 none。

preload="none"

但是一旦视频消失，海报就会消失。以下是我在 React 中实现的一种 hacky 方法，但您可以针对任何框架进行调整：

首先，我在 useEffect 中使用以下内容来检测浏览器是否为 safari：

var isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);

然后我将其设置在状态对象内。

如果 safari 为真，那么我不会显示视频，而是简单地显示以该海报为源的图像。然后我在图像标签本身上有一个 onClick 处理程序，单击它会将上述状态更改回 false，因此图像组件将停止显示，而将显示视频。现在，您必须在这里解决的另一个问题是，在单击图像时，图像将消失，视频将出现，然后您必须再次单击视频才能播放。这是糟糕的用户体验。因此，在设置状态后，您只需将引用附加到视频并在图像的单击处理程序中即可：

videoRef.current.play()

这也将开始播放视频。 我知道这是一个很糟糕的解决方案，所以不要来找我，但这是我能做的唯一能让它工作的事情。

Answer 2

我通过在 <video> 标签内的文件 URL 末尾添加 #t=0.001

解决了这个问题。

<video>
  <source src="path-to-video.mp4#t=0.001" type="video/mp4" />
</video>

查看此了解更多信息。