CODEWITHSUNDEEP
javascriptandroidjqueryhtmlhtml5-video
user7455781
user7455781

Reputation:

HTML5 video autoplay doesn't work on phones and tablets

HTML5 video autoplay doesn't work on phones and tablets.

I checked on the phone with Android 4.2.2 in Chrome 60 and iPad. Also, I checked on the phones with Android 4.2.2 and 7.0. I tried to use such scripts:

// 1
$(window).load(function () {
  $("video[autoplay]").get(0).play();
});


// 2
$(window).on("scroll", function() {
var video = $("video[autoplay]").get(0);

if (video.paused) {
  video.play();
}
});


// 3
$(window).on("touchstart touchmove touchend touchcancel", function () {
  var video = $("video[autoplay]").get(0);

  if (video.paused) {
    video.play();
  }
});

HTML:

<video id="video" autoplay="" loop="" playsinline="" muted="">
  <source src="videos/video1.mp4" type="video/mp4">
</video>

The first variant doesn't work at all.

The second one runs scripts inside of it, but the video doesn't play.

The third one runs scripts inside of it, but the video play only on the click!

Here is codepen. Here is website

Upvotes: 0

Views: 7230

Answers (1)

Himanshu Upadhyay
Himanshu Upadhyay

Reputation: 6565

Autoplay will not work with mobile browsers because mobile will be on network data, and if any auto play video starts playing, then it will consume data without user's permission and knowledge. So this is disabled for mobile browsers by default.

But still you can check these url for your solution:

Since the release of iOS 10 Apple has allowed video autoplay: https://webkit.org/blog/6784/new-video-policies-for-ios/

Chrome 53 on Android also allowing video autoplay: https://developers.google.com/web/updates/2016/07/autoplay

Upvotes: 2

Related Questions