javascript - 除非点击移动设备，否则视频海报图片不会显示

Question

我有以下代码:

    <video class="video" height="240" width="360" autobuffer="true" controls="true"> 
        <source src="/data.mp4"/>
    </video>
    <video class="video" height="240" width="360" autobuffer="true" controls="true"> 
        <source src="/data2.mp4"/>
    </video>
    <video class="video" height="240" width="360" autobuffer="true" controls="true"> 
        <source src="/data3.mp4"/>
    </video>

    <script type="text/javascript">
    var video=document.getElementsByClassName("video");
    Array.prototype.forEach.call(video,function(el){
          el.addEventListener('click',function(){
            el.play();
          },false);
    });
    </script>

当我在 PC 桌面网站 上查看它时，它看起来很棒。所有视频均显示海报图片。 但是，当我在我的移动浏览器中查看它时 (我有三星 Galaxy Note 5) 它最初不会显示视频海报图像，直到我单击然后显示视频海报图像的视频

Answer 1

使用 HTML5 video 标签的 poster 属性并定义您自己的要显示的图像(示例如下)。

海报属性: 一个 URL，指示在用户播放或搜索之前显示的海报框。如果未指定此属性，则在第一帧可用之前不显示任何内容；然后第一帧显示为海报帧。

 <video class="video" poster="my-poster.jpg" height="240" width="360" autobuffer="true" controls="true"> 
    <source src="/data.mp4"/>
</video>

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video

这是典型的移动设备功能，因为除非用户选择与视频进行交互，否则您不希望用户支付数据费用。这就是您无法在 iOS 设备上自动播放视频的原因。因此，如果没有海报属性，设备将不得不从实际视频内容中获取海报。