Video Autoplay Not Working On Android/IOS Phone...!!! FIXED

We’ve all heard of it. Most sites are using it. It’s called HTML5 and more specifically for this post – HTML5 Video. For maximum browser support, we use three types of video. Add them as <source> tags, wrap them all up in a video tag and you’re off and running. you’re off and running. In its simplest form, a HTML5 video is implemented like so:

 <video controls>  
   <source src="movie.webm" type='video/webm'>  
   <source src="movie.ogv" type='video/ogg'>  
   <source src="movie.mp4" type='video/mp4'>  
   <p>This is fallback content</p>  
 </video>  

PROBLEM STATEMENT

To make your HTML5 Video autoplay onload you can add the autoplay attribute to the video tag. 

 <video autoplay="true" >  

The problem is that most of mobile devices DO NOT support this attribute. Mobile browsers generally ignore this attribute to prevent consuming data until user explicitly starts the download. Bandwidth is precious – particularly on mobile devices. Apple/Android feels as though forcing a user to download your snazzy video is bad user experience. 

SOLUTION
Fortunately there is a work around for this problem. All you would have to do is create a div element, which covers the entire height and width of your device screen and add a event listener to this div, ontouchstart which redirects to a function, which plays the video.

 <div id="targetDiv" ontouchstart="playvideo();" onclick="playvideo();" style="height: 100%;position: fixed;z-index: 1000;width: 100%;top: 0px;"></div>  
 <div id="videodiv" style="display:none">  
     <video width="400" id="myvideo"><source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"></video>  
 </div>  

Once this function has been called, all you will have to do is just grab the video element by id, and call play() function on the video element. Make sure to remove the div element once you call this function.

  function playvideo(){   
    var videoElement;   
    document.getElementById("targetDiv").style.display="none";   
    document.getElementById("videodiv").style.display="block";   
    videoElement=document.getElementById("myvideo");   
    videoElement.play();   
  }