Firefox Android HTML5 видео мигает зеленым при игре - как форсировать буфер - PullRequest
Новая
       45

Firefox Android HTML5 видео мигает зеленым при игре - как форсировать буфер

0 голосов
/ 07 марта 2019

У меня есть веб-сайт, который будет содержать несколько очень коротких видеороликов в стиле GIF.Я надеялся, что каждый видео будет автоматически воспроизводиться по мере его достижения.Я написал небольшую статью в jQuery, которая проверяет, является ли видео в основном видимой, а затем настраивает воспроизведение видео, и это прекрасно работает на ПК, в каждом браузере, который я пробовал (даже в IE), и на Android в Chrome.Однако в Firefox на Android все работает не так хорошо.

Когда вы прокручиваете страницу вниз и видео запускается для воспроизведения, постер исчезает на долю секунды или несколько секунд,и вы получите яркий зеленый экран, на котором было видео, до того, как видео начнет воспроизводиться.Я предполагаю, что это, вероятно, связано с тем, что Firefox не загружает ничего из видео, потому что это мобильный браузер, но мне было интересно, можно ли что-нибудь сделать в качестве обходного пути.

Хорошо бы заставить постер оставаться на месте, пока видео не будет достаточно буферизовано для воспроизведения;было бы неплохо заставить браузер буферизовать, по крайней мере, секунду или около того видео, чтобы у него было что-то для начала воспроизведения;даже возможность изменить ужасающий зеленый на черный было бы лучше, чем ничего.

Если вы установите автоматическое воспроизведение видео с помощью свойства HTML5, это исправит это, поэтому я думаю, что обходной путь должен быть возможным.

Вот пример с некоторым базовым 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>

И 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();
    })
})

И вот JS Bin этого в действии: https://jsbin.com/verame/1

Любые указатели будут высоко оценены, так как я не уверен, что обходной путь автозапуска такой надежный!

...