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中做的一个简单的方法，但你可以在任何框架中调整它:

首先，我检测浏览器是否为safari，在useEffect中使用以下命令:

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

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

如果safari为true，则不显示视频，而是简单地显示带有该海报作为其来源的图像。然后我有一个onClick处理程序上的图像标签本身，点击它将改变上述状态回到假，因此图像组件将停止显示和视频将显示，而不是。现在你需要解决的另一个问题是，点击图像，图像会消失，视频会出现，然后你必须再次点击视频才能播放。这是糟糕的用户体验。因此，你可以简单地为视频附加一个ref并在设置状态后的Image的click处理程序中简单地do:

videoRef.current.play()

这也将开始播放视频。我知道这是一个粗糙的解决方案，所以不要指责我，但这是我唯一能让它工作的方法。