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

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 Desktop Website 上看它时，它看起来很棒。所有视频均显示海报图片。 然而，当我在我的移动浏览器中查看它时 (I have a Samsung Galaxy Note 5) 它最初不会显示视频海报图像，直到我单击其中显示视频海报图像的视频

Answer 1

使用 HTML5 视频标签的 poster 属性并定义您自己的要显示的图片（示例如下）。

海报属性： A 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 设备上自动播放视频的原因。所以如果没有海报属性，设备将不得不从实际的视频内容中获取海报。

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

Video Poster Image not showing unless clicked on for MOBILE

javascript

html

css

media-player

android-mediaplayer