While using a mobile device, video auto-play does not work on Chrome but it works on Firefox & Opera. (Not sure what the story is with Safari as I have no iOS device).

OPTION 1: Using video tag:

html code:

<video autoplay loop poster="images/bg.jpg" id="video_bg">
<source src="video.webm" type="video/webm">
<source src="video.mp4" type="video/mp4">
</video>

css code:

video#video_bg {
position: fixed; right: 0; bottom: 0;
min-width: 100%; min-height: 100%;
width: auto; height: auto; z-index: -100;
background: url(../images/bg.jpg) no-repeat;
background-size: cover;
}

OPTION 2: Using YouTube embedded video code with auto-play set: (Again, works on a desktop but not on a mobile)

html code:

<iframe src="" width="960" height="447" frameborder="0" allowfullscreen></iframe>

My Question:

Is there any javascript code that would force auto-play on Chrome browser while viewing the page on a mobile device? Any other suggestions, please? Thank you!

While using a mobile device, video auto-play does not work on Chrome but it works on Firefox & Opera. (Not sure what the story is with Safari as I have no iOS device).

OPTION 1: Using video tag:

html code:

<video autoplay loop poster="images/bg.jpg" id="video_bg">
<source src="video.webm" type="video/webm">
<source src="video.mp4" type="video/mp4">
</video>

css code:

video#video_bg {
position: fixed; right: 0; bottom: 0;
min-width: 100%; min-height: 100%;
width: auto; height: auto; z-index: -100;
background: url(../images/bg.jpg) no-repeat;
background-size: cover;
}

OPTION 2: Using YouTube embedded video code with auto-play set: (Again, works on a desktop but not on a mobile)

html code:

<iframe src="http://www.youtube./embed/xzvScRnF6MU?autoplay=1" width="960" height="447" frameborder="0" allowfullscreen></iframe>

My Question:

Is there any javascript code that would force auto-play on Chrome browser while viewing the page on a mobile device? Any other suggestions, please? Thank you!

• javascript
• jquery
• google-chrome

• AFAIK .. as of today June 2016.. Autoplay works on Chrome by default .. chk plus.google./+FrancoisBeaufort/posts/6PiJQqJzGqX – suraj jain Commented Jun 3, 2016 at 10:43

1 Answer 1

Not really. For the same reason that mobile Safari and Chrome ignore the autoplay and preload attributes for audio and video tags, they also will not honor the play() or load() methods — or any method that would cause data activity on the network — for related entities unless they are called directly within user-interaction callback handlers. The reason is to prevent potentially costly data charges for users on cellular data. More information in Apple's Documentation.

Read Overing iOS HTML5 audio limitations — a fantastic article that explains your exact situation and provides example solutions.

A hack I've used in the past is to place one of the valid "user-interaction" events (such as onmousedown, onmouseup, onclick, and ontouchstart) on a high-level element and initiate the data load in its callback. As an illustrative example, you could place an ontouchstart event on the body — which will be triggered whenever a user does anything on a page — to ensure the data begins loading as early as possible.

var body = document.getElementById('body');
var audio = document.getElementById('audio');

var loadData = function () {
    audio.load();
};

body.addEventListener('ontouchstart', loadData, false);

But the best solution will really depend on your use case. Always consider audio sprites as well and using a WebAudio framework, such as HolwerJS, can really simplify your life!