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

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

HTML5视频海报不显示Safari

1 个答案: