Question

我的网站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中使用。如何在移动设备上进行视频自动播放？

Answer 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

Answer 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>

在任何最近的桌面浏览器上，它都应该自动播放和循环。但在移动游猎中，它不会自动播放，甚至根本不播放。我甚至无法点击播放按钮来实现它。只显示海报图片。

如果我劫持OP的问题，请道歉，但至少它是同一个问题！

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

2 个答案:

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

2 个答案:

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