JavaScript force video autoplay on mobile devices

Question

To enable the autoplay of a video we just add the "autoplay" attribute to the video tag.

This doesn't work on mobile devices and browsers like Google Chrome, iPad, iPhone, the "play" method will not work until there is no user interaction with the touchscreen.

But in this link or this link, with a custom JavaScript player, they bypass this block, and the video autoplay on iPhone, iPad, Webkit Browsers and all Mobile Devices without user interaction.

How can i do it myself?

if at the load of the page i simulate touch events this might unlock the video "play" method?

i cloud load a video url only with canvas? without the video tag?

Please help and explain me.

Answer 1

There's a library which uses canvas to autoplay inline video on mobile. The downside is that there is no audio, since canvas originally wasn't intended for that.

The library basically loads all the frames and then shows them to you in a sequence. This brings along some limitations regarding the length of the video. Beats gifs tho....

https://github.com/gka/canvid