javascript - 为什么我的页面在手机上只显示黑屏背景而不是 mp4 视频背景?

标签 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';
    });

}

最佳答案

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

关于javascript - 为什么我的页面在手机上只显示黑屏背景而不是 mp4 视频背景?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38369631/

相关文章:

javascript - 文件选择器?通过 HTML5 将大文件上传到 S3,无需后端

javascript - 根据 Javascript 中的正则表达式模式测试字符串

Javascript 只允许一个文本框包含一个值

jquery - 激活菜单下方带箭头的选项卡导航栏

javascript - 更改 iframe 内的文本?

javascript - 如何从 firebase 存储 state_changed 事件中获取下载图片 url?

javascript - 如何移动包含文本的 div 的图像/div 标记中心

javascript - jqgrid排序时改变光标

javascript - 如何创建一个包含自动完成框的模式弹出窗口来选择一个条目?

javascript - HTML 中的 JSON 对象检索