Ufdjrw

I have a website which will contain several, very short, GIF style videos. I was hoping to have each video autoplay as the user reaches it. I wrote a quick piece in jQuery that checks if the video is mostly visible, and then sets the video to play, and this works fine on PC, in every browser I've tried (even IE), and on Android in Chrome. However, in Firefox on Android, things don't work quite so well.

As you scroll down the page and the video gets triggered to play, the poster will disappear for either a split second, or several seconds, and you'll end up with a bright green screen where the video was, before the video starts playing. I'm guessing this is probably something to do with Firefox not loading anything of the video in because it's a mobile browser, but I was wondering if there was anything I could do as a workaround.

Forcing the poster to stay in place until the video's buffered enough to play would be fine; forcing the browser to buffer at least a second or so of the video so it has something to start playing would be fine; even being able to change the horrendous green to black would be better than nothing.

If you set the videos to autoplay using the HTML5 property, this fixes it, so I guess a workaround must be possible.

Here's an example with some basic HTML:

<video class="vids video-js" data-id="NiceGreatBullfrog" id="NiceGreatBullfrog" muted="true" controls="controls" loop="loop" playsinline="" preload="auto" poster="https://thumbs.gfycat.com/NiceGreatBullfrog-poster.jpg">
 <source src="https://giant.gfycat.com/NiceGreatBullfrog.mp4" type="video/mp4">
 <source src="https://giant.gfycat.com/NiceGreatBullfrog.webm" type="video/webm"></video>

<video class="vids video-js" data-id="MerryIllegalConure" id="MerryIllegalConure" muted="true" controls="controls" loop="loop" playsinline="" preload="auto" poster="https://thumbs.gfycat.com/MerryIllegalConure-poster.jpg">
 <source src="https://giant.gfycat.com/MerryIllegalConure.mp4" type="video/mp4">
 <source src="https://giant.gfycat.com/MerryIllegalConure.webm" type="video/webm"></video>

<video class="vids video-js" data-id="CourteousAltruisticCero" id="CourteousAltruisticCero" muted="true" controls="controls" loop="loop" playsinline="" preload="auto" poster="https://thumbs.gfycat.com/CourteousAltruisticCero-poster.jpg"><source src="https://giant.gfycat.com/CourteousAltruisticCero.webm" type="video/webm"><source src="https://giant.gfycat.com/CourteousAltruisticCero.mp4" type="video/mp4"></video>

<video class="vids video-js" data-id="AmbitiousSpectacularBarebirdbat" id="AmbitiousSpectacularBarebirdbat" muted="true" controls="controls" loop="loop" playsinline="" preload="auto" poster="https://thumbs.gfycat.com/AmbitiousSpectacularBarebirdbat-poster.jpg"><source src="https://giant.gfycat.com/AmbitiousSpectacularBarebirdbat.webm" type="video/webm"><source src="https://giant.gfycat.com/AmbitiousSpectacularBarebirdbat.mp4" type="video/mp4"></video>

<video class="vids video-js" data-id="MammothAbleEarwig" id="MammothAbleEarwig" muted="true" controls="controls" loop="loop" playsinline="" preload="auto" poster="https://thumbs.gfycat.com/MammothAbleEarwig-poster.jpg"><source src="https://giant.gfycat.com/MammothAbleEarwig.webm" type="video/webm"><source src="https://giant.gfycat.com/MammothAbleEarwig.mp4" type="video/mp4"></video>

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<video class="vids video-js" data-id="LastingDopeyAmurratsnake" id="LastingDopeyAmurratsnake" muted="true" controls="controls" loop="loop" playsinline="" preload="auto" poster="https://thumbs.gfycat.com/LastingDopeyAmurratsnake-poster.jpg"><source src="https://giant.gfycat.com/LastingDopeyAmurratsnake.webm" type="video/webm"><source src="https://giant.gfycat.com/LastingDopeyAmurratsnake.mp4" type="video/mp4"></video>

And the jQuery

$(document).ready(function()
 var media = $('video');

 function checkmedia()
 // Get current browser top and bottom
 var scrollTop = $(window).scrollTop();
 var scrollBottom = $(window).scrollTop() + $(window).height();

 media.each(function(index, el) 
 var height = parseInt($(this).height());
 var visiblechunk = height/1.2;
 var vidpostop = $(this).offset().top;
 var vidposbottom = $(this).height() + vidpostop;

 /* Only play when a certain portion of the video is visible */
 vidpostop = vidpostop+visiblechunk;
 vidposbottom = vidposbottom - visiblechunk;
 if(scrollTop < vidposbottom && scrollBottom > vidpostop)
 if($(this).hasClass('autoplayed'))

 else
 $(this).get(0).play();
 $(this).addClass('autoplayed');
 

 else
 $(this).get(0).pause();
 $(this).removeClass('autoplayed');
 
 );
 
 $(window).scroll(function()
 checkmedia();
 )
)

And here's a JS Bin of it in action: https://jsbin.com/verame/1

Any pointers would be much appreciated, as I'm not sure the autoplay workaround is that robust!