I use this code to make a video (eg. banner, so no controls) autoplay and loop forever.
<video id="video1" class="video-js vjs-default-skin"
controls width="900" height="500"
poster="myposter.jpg"
data-setup='{
"controls": false,
"loop": "true",
"autoplay": true,
"preload": "true"}'>
<source src="thisismyvideoyay.webm" type='video/webm' />
</video>
It works fine on my computer but on my phone (Android OS 4.2.2 with Chrome) it's not autoplaying or preloading and not looping after it finished.
I read this on Video.js page:
Auto: Start loading the video immediately (if the browser agrees). Some mobile devices like iPhones and iPads will not preload the video in order to protect their users' bandwidth. This is why the value is called 'auto' and not something more final like 'true'.
I set the preload to true but it still doesn't autoplay or loop.
Is that a feature of my browser and how can I avoid that?
I tried on other browsers:
- UC Browser doesn't seem to support HTML5 at all?
- Stock browser shows a little video icon but doesn't show the player, too
- ↑ Same with Maxthon ↑
autoplay
attribute. Mobile users have legitimate reasons not to automatically download video content over expensive and limited data connections, forcing them to do this anyway so that they will "see the content of your site" is a bad. Think about providing them with some content that will make them think it's worth their time and money to see your video rather than trying to trick the browser into spending that time and money for them.