CODEWITHSUNDEEP
androidhtmlgoogle-chromevideoautoplay
Rahul R
Rahul R

Reputation: 41

Autoplay html video on Android Chrome browser inconsistent over different browser versions

I have a simple video which I need to autoplay on any browser on android mobile devices. Here is what I have implemented

https://output.jsbin.com/bovarep

<video poster="https://dj7u9rvtp3yka.cloudfront.net/layout/video_posters/THAMarchEditorial/TOP5TRENDS-1p777-en_v1.jpg" class=" m-u-media wrapper__video" autoplay preload="auto" muted="" loop="" media_id="media1">
  <source src="https://dj7u9rvtp3yka.cloudfront.net/layout/streaming/THAMarchEditorial/TOP5TRENDS-en_v1.mp4" type="video/mp4">
  <source src="https://dj7u9rvtp3yka.cloudfront.net/layout/streaming/THAMarchEditorial/TOP5TRENDS-en_v1.webm" type="video/webm">         
</video>

The video will autoplay on some "OS version and Chrome version" combinations but doesn't autoplay on some other combinations. And the combination at which it works is random.

Please let us know if someone is facing the same issue or if someone has solved the issue.

Thank s in advance.

Additional info:

Autoplay works on (Chrome - 64.0.3282.137, OS - Android 8.0.0),

Autoplay doesn't work on (Chrome - 63.0.3239.111, OS - Android 7.0.0)

Upvotes: 3

Views: 2078

Answers (1)

Rahul R
Rahul R

Reputation: 41

Found out what exactly was the issue.

So the issue is not exactly an Android OS version or Chrome version. Recent versions of chrome have 'Data saver' feature which prevents the chrome from loading and autoplaying the video, hence video doesn't autoplay even if it is muted.

To solve this issue, since there were no other ways to autoplay the video we just show a prominent play icon which tells the user that it is a video.

You can look into promise returned by calling video.play() based on which you can show the play icon in the case of failed promise.

More about HTML video promise - https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/play

Let us know if anyone has a better solution.

Thank you

Upvotes: 1

Related Questions