HTML 5 Video Not Showing / Playing in Android

Question

My HTML 5 video is shows up as a blank white screen in Android galaxy. Online search suggest removing "type" parameter and play via JS, but that does not seem to work.

I tried to recreate the issue with jsfiddle but I can't simulate a mobile device.

Any idea how to get mobile video to play on Android and iPhone? I've seen this done by Buzzfeed and the new york times so I know there is a safe way.

<section class="video_container sections">
    <video preload="none" autoplay loop muted="true"class="video_window videos">
      <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4">
      <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm" type="video/webm">
      <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4">

        Your browser does not support the video tag.
    </video>
    <div class="video_caption"> 
        <p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
    </div>
</section>



$(window).scroll(function() {
  $('.videos').each(function(){
      if ($(this).is(":in-viewport")) {
         $(this)[0].play();
      } else {
         $(this)[0].pause();
      }
    })
});

.video_container{
    position: relative;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    z-index: -100;
}
.video_captiont{
  position:absolute;
  margin:5px;
  z-index:100;
  font-size:21px;
  padding:3%;

}