如何在移动设备上自动播放、全屏和无控件答案

【问题标题】：how to auto play, full screen and no controls on mobile devices如何在移动设备上自动播放、全屏和无控件
【发布时间】：2016-02-08 08:25:33
【问题描述】：

有没有办法让全屏视频自动播放，无需控件，在移动设备上工作？

我使用的方法只是显示了一个黑色背景的播放按钮。

<video poster="#url#" id="backgroundvideo">
<source src="#url#" type="video/mp4">
<source src="#url#" type="video/ogg">
<source src="#url#" type="video/webm">
</video>

backgroundvideo { 
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -1000;
-ms-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
background: url(#url#) no-repeat;
background-size: cover; 
background-size: 100%;
background-position: center;
}

【问题讨论】：

请分享您尝试过的方法
我尝试添加许多不同的文件格式，但我一直在搞乱禁用海报、自动播放、全屏等
我们很高兴看到您的代码，最好是 jsFiddle 演示
编辑帖子以包含代码。
您无法在移动设备上使用自动播放功能，因为它们不会预取数据（以保存访问者的数据计划）。因此，这意味着您将无法隐藏控件...

标签： css html video mobile autoplay

【解决方案1】：

下面会自动播放源：

<video width="320" height="240" autoplay>
  <source src="changeme.mp4" type="video/mp4">
</video>

如果你想在用户的浏览器不支持该方法时显示消息：

<video width="320" height="240" autoplay>
  <source src="changeme.mp4" type="video/mp4">
  Your browser does not support the video.
</video>

以下浏览器及其最低版本号支持以上代码：

【讨论】：