As a automatically play video on Android / iOS?

Hi all.

There is a device on Android 4.4, and the following code (fullscreen video):




 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1">

<title>Test</title>

 <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
 <link rel="stylesheet" href="../css/style.css">



 <video webkit-playsinline-playsinline autoplay muted loop id="bg" controls>
 <source src="../media/code.mp4">
 <source src="../media/code.webm" type="video/webm">
 <source src="../media/code.ogv" type="video/ogg">
</video>



On desktops no problem. On Android (and like iPhones - will check tomorrow) does not start the video.

I tried to run through
var video = document.querySelector('bg');
video.play();


the situation on Android is not changing gray background and an icon to start (click on it too, nothing happens).

Comrades, can anyone have a solution to this problem without using any jQuery stuff. I would like not to replace smartphones video on the background and still play video slot machine.
July 2nd 19 at 18:13
2 answers
July 2nd 19 at 18:15
Solution
On the iPhone will not start no matter how you try. It is a feature of the iPhone, the protect traffic.

UPD: Thanks for adding information on IPhones
https://github.com/bfred-it/iphone-inline-video

A working solution for Android here https://arm1.ru/blog/html5-video-kak-fon-stranitsy

With Android the hardest. AutoPlay not working. The Play button only appears if you add to the tag attribute of the video controls to display standard controls control. This, alas, is not so beautiful. But that's not all. In order for the video to start playing, you need to add additional Javascript handler that will forcibly tell the video to play:

var video = document.getElementById(element);
video.addEventListener('click',function(){
video.play();
},false);

To determine Android to add attribute controls, I just used Detect.js:

var ua = detect.parse(navigator.userAgent);
if ( ua.os.family === 'Android' ) {
 video.setAttribute( 'controls','controls' );
}

PS: actually, I would recommend on mobile devices don't show the video.
Just make a beautiful background picture, really, why waste the traffic of people.
Not everyone is sitting with WI-FI, and an important loading speed of your site from the phone.
So I look at all the user of Android in any case have to lay on the video to start it? - clemmie.Pour commented on July 2nd 19 at 18:18
: No, the OS will start. It says it all. "With Android the hardest. AutoPlay not working. The Play button only appears if you add to the tag attribute of the video controls to display standard controls control. This, alas, is not so beautiful. But that's not all. In order for the video to start playing, you need to add additional Javascript handler that will forcibly tell the video to play" - caleb_Stehr commented on July 2nd 19 at 18:21
in this case, either the article is obsolete, the author is not the event gash:

video.addEventListener('click',function(){

Why click something? :) - clemmie.Pour commented on July 2nd 19 at 18:24
: so specifically I have a loop doesn't work either - clicking the video plays and repeats - clemmie.Pour commented on July 2nd 19 at 18:27
Possible and on the other to gash:
https://github.com/bfred-it/iphone-inline-video - Emilie_OKee commented on July 2nd 19 at 18:30
: Can add controls removes the loop? - caleb_Stehr commented on July 2nd 19 at 18:33
: um...and how do you propose to me to check? The inspector is not a code on Android and via desktop I'm not able to simulate the situation ) - clemmie.Pour commented on July 2nd 19 at 18:36
: Well, then fill to also added) - caleb_Stehr commented on July 2nd 19 at 18:39
and, sorry, evening confusion found...finished, controls are added, but before him, all the attributes remain unchanged. That is to say, the solution is not workable, at least on my Android 4.4 Kit Kat. - clemmie.Pour commented on July 2nd 19 at 18:42
: no, the video does not play automatically - clemmie.Pour commented on July 2nd 19 at 18:45
clicks works, but if I'm not mistaken, it was about the forced playing, isn't it? or it implies that playing by clicking? Then what is it forced? :) - clemmie.Pour commented on July 2nd 19 at 18:48
July 2nd 19 at 18:17
And if so:
document.getElementById('bg').play();
Work?
The path is correctly written?
Doesn't work - the way spelled out correctly because the desktop is running - clemmie.Pour commented on July 2nd 19 at 18:20

Find more questions by tags HTMLCSSJavaScript