Why Autoplay does not work in HTML?

Autoplay does not work for the video tag, jQury has already disabled it, wrote autoplay = "autoplay", and created an empty page where there is nothing but video, nothing helped and the video does not play by itself! Only if you add controls, but autoplay will not care, it will start only after clicking on it!

And so, when html5 came to us, it brought with it a lot of new buns such as canvas, footer, etc. One of these goodies turned out to be a video tag. Really incredibly useful and easy to use. Many of you even know about the autoplay attribute, but this attribute has difficulties on mobile devices running Android and IOS.

Let's first figure out what the problem is. And the problem is really simple, and no, not that these browsers of these operating systems do not support this tag or attribute. In fact, the whole point is that these phone manufacturers think at least a little about their consumers and have banned this opportunity for some reason:

1. This drains the battery [according to Apple], and therefore it was necessary to disable autoplay of the video.
2. Sound. Many users may have sound turned on. If there is no autorun, then before viewing the user will be able to turn down the volume in advance if necessary.

Of course there are other minor reasons, but the ones listed above are the most basic.
And so, what should we do in this situation, if the customer asked you to post a video on his site, while prohibiting the user to manage it + it must be auto-start and cyclical.
First thing you need to do is set the muted attribute to c instead of the autoplay attribute. Thanks to this, your video will be played, but without sound, thus, we will inform the smartphone's browser that, by and large, nothing terrible will happen.

If you have any difficulties, for example on the iPhone. Those. you use the muted attribute, but for some reason the video does not play, in which case we will need to resort to jQuery. I hope you also use this library.

And so what we actually did. This script first checks from which device we are logged in, if it is really a mobile device, then we launch the function to process our video tag. First of all, we add controllers, because many mobile devices do not allow the video to start without the user's knowledge, and if you just use .play [] without controllers, then the result may be zero. And so, the controllers are added, and then we take the object of our tag and run it using .play []. Thanks to this, the video will start immediately after loading the page, but there is one but! Native browsers, such as webview on android, will still not allow you to start the video automatically, unfortunately there is nothing you can do about it, the whole problem is that they block any action that takes place on the site without the user's knowledge. For the sake of interest, I myself personally tried to write a script blende, so that the video would start, for example, when the document scroll event, there was zero sense, so there was a slight perversion, I hung the event on BODY, that when I clicked on it, I started the video, and when the document was loaded, I made a .trigger ['click']; Well, what do you think, the click trigger worked, I was informed about this by the alert [] that appeared, which I also wrote into a script for verification, but the video did not start. But on the other hand, it started perfectly when I personally made a click on BODY. If you still have any solution, then please write it in the comments to this article.

UPDATE AS OF 22.05.2018/XNUMX/XNUMX

To run video in browser on iPhone using the video tag, you need to add the following attributes.

webkit-playsinline and playsinline

That's all for now, I hope if you come across a similar task, you will already know the solution. And also if this article turned out to be interesting for you, then write comments and do not forget to share in social. networks

I have the following code:

1. renders well in both Chrome and Firefox
2. In Firefox, it plays as expected
3. Chrome displays but not "autoplay". This is problem.
4. If I click on it [in Chrome] it plays fine

Nothing worked in Chrome

Then I also tried changing the codec as recommended at //en.wikipedia.org/wiki/HTML5_video, but it didn't work either:

So now I'm stumped. Thanks for any pointers! Much appreciated.

7 answers

I was just reading this article and it says:

Important: The order of the video files is vital; Chrome currently has a bug where it won't automatically launch a .webm video if it comes after anything else.

So it looks like your problem will be solved if you put the .webm in your source list first. Hope it helps.

TL; DR You are still always available to autoplay muted videos

Also, if you want to autoplay videos on iOS, add the playsInline attribute, because by default iOS tries to watch full screen videos // webkit.org/blog/6784/new-video-policies-for-ios/

This may not be the case at the time the question was asked, but as of Chrome 66, autoplay is blocked.

You need to add playsinline autoplay muted loop, chrome doesn't allow video autoplay unless disabled, also right now I don't know why it doesn't work on all android devices, im trying to see if this is a specific option If I found something , I'll tell

Problem with Chrome: After some research, I found that sometimes it doesn't work on chrome, because in responsive mode you can activate the save data function and block any autostart video

Extremeandy mentioned that Chrome 66's video is disabled.

After researching this, I found that disabled videos can still start automatically. In my case, the video didn't have any audio, but adding muted to the video tag fixed:

Hope this helps others as well.

Try this when I tried to mute the sound, check this demo in the codpen script