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:
Of course there are other minor reasons, but the ones listed above are the most basic. 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:
Nothing worked in Chrome Then I also tried changing the codec as recommended at https://en.wikipedia.org/wiki/HTML5_video, but it didn't work either: So now I'm stumped. Thanks for any pointers! Much appreciated. 7 answersI was just reading this article and it says:
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 https: // 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 |