如何在手机和平板电脑上制作 html 视频自动播放？答案

【问题标题】：How to make html video autoplay on phones and tablets?如何在手机和平板电脑上制作 html 视频自动播放？
【发布时间】：2016-12-28 10:53:37
【问题描述】：

我的网站 olegefimkin.ru 上有一个背景视频，它应该会在页面加载时自动开始播放。它适用于 PC 和某些手机，但不适用于某些手机和平板电脑（例如 iPhone）。我正在使用这个 html 代码：

<video autoplay loop muted id="main-video">
  <source src="/themes/basic/video/intro.webm" type="video/webm"></source>
  <source src="/themes/basic/video/intro.mp4" type="video/mp4"></source>
</video>

我也尝试添加 javascript video.play() 但它仍然无法在 Safari 中使用。如何在移动设备上自动播放视频？

【问题讨论】：

标签： javascript html html5-video

【解决方案1】：

除非您满足以下要求，否则视频不会在 Safari IOS 中自动播放：

<video> elements will be allowed to autoplay without a user gesture if their source media contains no audio tracks.
<video muted> elements will also be allowed to autoplay without a user gesture.
If a <video> element gains an audio track or becomes un-muted without a user gesture, playback will pause.
<video autoplay> elements will only begin playing when visible on-screen such as when they are scrolled into the viewport, made visible through CSS, and inserted into the DOM.
<video autoplay> elements will pause if they become non-visible, such as by being scrolled out of the viewport.

您需要从源中删除音频或将其静音并启用声音以通过手势激活。

来自Webkit policies for video

【讨论】：

我很想知道这个答案是否有帮助。我已经满足了所有这些要求，但仍然无法正常工作。我在 Final Cut 中创建了视频，分离并删除了时间线中的音轨，仅将其导出为视频（1.3mb mp4），并在视频标签中指定了 playinline 自动播放静音。我什至无法让它在 iOS 10.2 上播放，除非我将视频直接放入浏览器的地址栏中。
只是html代码，没有js甚至css。我会将其粘贴到下面的答案中。
opera mini in ios 默认支持自动播放，而 chrome、firefox 和 safari 不支持也不提供开启选项。

【解决方案2】：

<video poster="video-sg.jpg" playsinline autoplay muted loop>
  <source src="caffe.webm" type="video/webm">
  <source src="caffe.mp4"" type="video/mp4">
  Your Browser May Not Support This
</video>

在任何最近的桌面浏览器上，它都会自动播放和循环播放。但在移动 Safari 中，它不会自动播放，甚至根本不会播放。我什至无法按下播放按钮来启动它。只显示海报图片。

抱歉，如果我劫持了 OP 的问题，但至少这是同一个问题！

【讨论】：