I am using jquery video.js. I have issue in autoplay video for android mobile and iphone devices.
It is working fine in my computer browser
My code is
<html>
<head>
<script href="skin/frontend/fashfolies/default/js/video-js/video.js"></script><!-- skin/frontend/fashfolies/default/js -->
<link src="skin/frontend/fashfolies/default/css/video-js/video-js.css" type="text/css" rel="stylesheet">
</head>
<body>
<video id='my-video1' class='video-js' controls style='width:50%; height:300px;' data-setup='{}' muted>
<source src='media/home-video/brand.mp4' type='video/mp4'>
<p class='vjs-no-js'>To view this video please enable JavaScript, and consider upgrading to a web browser that<a href='#' target='_blank'>supports HTML5 video</a>
</p>
</source>
</video>
<script>
var vi=document.getElementById("my-video1");
//vi.autoplay=true;
setIntervel(function(){
vi.autoplay=true;
vi.load();
},2000);
</script>
</body>
</html>
I don't know in particular video.js but i think the point is that mobile OS intentionally disable autoplay on mobile devices in order to protect user’s bandwidth. The trick you could try is to set video play on an user fired event, for example:
$(window).on("touchstart", function()
{
vi.play();
}