HTML5 视频海报不显示 Safari答案

【问题标题】：HTML5 Video Poster Not Displaying SafariHTML5 视频海报不显示 Safari
【发布时间】：2014-04-27 17:38:30
【问题描述】：

我的视频海报出现在 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>

【问题讨论】：

更新 - 我刚刚添加了 preload="none" 到视频元素和海报加载，但只有在我刷新页面之后。有什么想法吗？
您是否在网络工具（时间线、网络请求）中查看了是否正在请求发布者
我在某些机器上看到过同样的问题。刷新后一切正常。它以空白图像空间开始。在所有其他浏览器中都可以正常工作，只是 Safari 似乎有问题。

标签： html video safari

【解决方案1】：

这是因为这是默认的 Safari 行为，他们会在第一帧准备好播放时立即加载视频。暂时显示海报的一件事是将视频标签上的preload 属性设置为无。 preload="none" 但是一旦视频消失，海报就会消失。以下是我在 React 中使用的一种 hacky 方式，但您可以针对任何框架进行调整：

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

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

然后我将它设置在一个状态对象中。

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

videoRef.current.play()

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

【讨论】：