Video autoplay doesn't work in Safari and Chrome desktop browsers
P粉667649253
2023-08-23 19:41:34
<p>I spent a lot of time trying to figure out why the video was embedded like this: </p>
<pre class="brush:php;toolbar:false;"><video height="256" loop autoplay muted controls id="vid">
<source type="video/mp4" src="video_file.mp4"></source>
<source type="video/ogg" src="video_file.ogg"></source>
</video></pre>
<p>Autoplay starts after page loads in FireFox, but does not autoplay in Webkit-based browsers. This only happens on some random pages. So far I can't find the reason. I suspect the CMS editor created some unclosed tags or a lot of JS. </p>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
After using jQuery
play()or DOM manipulation as suggested by other answers, it still doesn't work properly in Chrome for Android (version 56.0) (video doesn't autoplay). p>Based on this post from developers.google. com, Starting with Chrome 53, the browser will respect the autoplay option if the video is muted.
Therefore, using the
autoplay mutedattribute in the video tag will make the video autoplay in Chrome browser version 53 and above.Excerpted from the above link:
The best solution I could get is to add this code after
...Not pretty, but somehow effective.
renew Recently, many browsers can only automatically play videos with sound turned off, so you also need to add the
to the video tag.mutedattribute