为什么我的页面只在移动设备上显示黑屏背景而不是mp4视频背景?

时间:2016-07-14 08:50:51

标签: javascript jquery html css video

我尝试设置mp4视频背景,它在桌面上工作正常,但不能在移动设备上工作,因为它显示海报图像,海报图像后它只显示黑色背景。 以下是视频标记:

<div id="evercam-video-section" class="evercam-video-section">
<video class="cover-image" autobuffer autoplay loop preload id="loop-video">
    <source src="https://evercam.io/img/404.webm" type="video/webm">
    <source src="https://evercam.io/img/404.ogv" type="video/ogg">
    <source src="https://evercam.io/img/404.mp4" type="video/mp4">
  </video>
</div>

这是javascript代码:

var fade_in_videos = document.querySelectorAll('#loop-video');

for( i=0; i<fade_in_videos.length; i++ ) {
    fade_in_videos[i].addEventListener("playing", function(){
        this.className += ' is-playing';
    });

}

1 个答案:

答案 0 :(得分:0)

许多(大多数)移动设备不支持视频自动播放,以避免用户在蜂窝连接上连接时产生高额数据费用。