视频海报图像不显示，除非点击移动

Video Poster Image not showing unless clicked on for MOBILE

本文关键字：移动 海报 图像 显示 视频      更新时间：2023-09-26

我有以下代码:

    <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)中查看它时，它最初不显示视频海报图像，直到我点击视频，然后视频海报图像显示

使用HTML5视频标签的海报属性并定义自己的图像来显示(示例如下)。

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

相关文章：