如何在手机和平​​板电脑上制作html视频自动播放？ [英] How to make html video autoplay on phones and tablets?

问题描述

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

 < video autoplay loop muted id =main-video> ; 
< source src =/ themes / basic / video / intro.webmtype =video / webm>< / source> 
< source src =/ themes / basic / video / intro.mp4type =video / mp4>< / source> 
< / video> 
  

我也尝试添加javascript video.play（），但它仍然不起作用苹果浏览器。
如何在移动设备上自动播放视频？

解决方案

除非你在Safari IOS中自动播放视频符合以下要求：

 < video>元素将被允许在没有用户手势的情况下自动播放，如果其源媒体不包含音轨。 
<视频静音>元素也将被允许在没有用户手势的情况下自动播放。 
如果< video>元素获得音轨或在没有用户手势的情况下变为非静音，播放将暂停。 
<影片自动播放>元素只能在屏幕上可见时才会开始播放，例如滚动到视口中时，通过CSS显示并插入到DOM中。 
<影片自动播放>如果元素变得不可见，元素将会暂停，例如通过滚动出视口。 
  

您需要从源中删除音频或将其静音，并启用声音一个手势。

从针对视频的Webkit政策

I have a background video on my site olegefimkin.ru which should start playing automatically on page load. And it does on PC and some phones, but doesn't on some phones and tablets (e.g. iPhone). I'm using this html code:

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

I've also tried to add javascript video.play() but it still doesn't work in Safari. How can i make video autoplay on mobile devices?

解决方案

The video won't autoplay in Safari IOS unless you meet the following requirements:

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

You need to either remove the audio from the source or mute it and enable the sound to be activated by a gesture.

From the Webkit policies for video

这篇关于如何在手机和平​​板电脑上制作html视频自动播放？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！