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视频广告代码的海报属性并定义您自己要展示的图片（示例如下）。

海报属性： 指示在用户播放或搜索之前显示的海报框架的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设备上自动播放视频的原因。因此，如果没有海报属性，设备将不得不从实际视频内容中获取海报。

视频海报除非点击MOBILE，否则图片不会显示

1 个答案: