我有一个网站，其中包含一些非常简短的GIF风格的视频。我希望每个视频都能在用户到达时自动播放。我在jQuery中写了一篇简短的文章，检查视频是否大部分可见，然后设置视频播放，在PC，我尝试过的每种浏览器（甚至是IE）以及在Chrome中的Android上都可以正常工作。但是，在Android上的Firefox中，事情运行得不太好。
当您向下滚动页面并触发视频播放时，海报将消失一秒钟或几秒钟，并且最终会在视频之前出现明亮的绿色屏幕，显示视频所在的位置开始播放。我猜想这可能与Firefox不加载任何视频有关，因为它是移动浏览器，但是我想知道是否有什么可以解决的方法。
将海报强迫留在原处，直到视频缓冲到足以播放为止；强迫浏览器至少缓冲一秒钟左右的视频，以便它有 东西 开始播放；甚至能够将可怕的绿色变成黑色总比没有好。
如果您使用HTML5属性将视频设置为自动播放，则会对其进行修复，因此，我认为必须有一种解决方法。
下面是一些基本HTML的示例：
@angular/common/http还有 jQuery
<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>
这是一个正在运行的JS Bin：https://jsbin.com/verame/1
任何指针将不胜感激，因为我不确定自动播放的解决方法是否健壮！