Как предотвратить переход bxslider к следующему слайду при автоматическом воспроизведении видео? - PullRequest
Новая
       38

Как предотвратить переход bxslider к следующему слайду при автоматическом воспроизведении видео?

0 голосов
/ 27 апреля 2019

Поэтому я использую bxslider для своей домашней страницы и хочу сократить время загрузки своего сайта.Одна из вещей, которая делает его медленным, это когда на моем слайдере есть одно или несколько видео на YouTube, поэтому я следовал этому решению , но с Jquery.

Что он делает, так это то, что он загружает толькоуменьшенное изображение видео YouTube, и пока вы не нажмете кнопку воспроизведения заполнителя, он воспроизводит фактическое видео.Моя проблема в том, что когда вы нажимаете на кнопку заполнителя, она загружает видео и воспроизводит, но слайд продолжает двигаться, этого не происходит, когда вы добавляете видео из YouTube в iframe, потому что при нажатии на кнопку реального воспроизведения он вызываетчто-то, чтобы остановить движение ползунка, но я не делаю это с кнопкой заполнителя.

Это мой HTML моего слайдера: 

<li>
    <div id="video{{forloop.counter}}" class="youtube" data-embed="{{ video_code }}"> 
        <!--"play" button -->
        <div class="play-button"></div> 
    </div>
</li>

Это Jquery, который добавляет iframe и воспроизводит то, что он делает, что для каждого видео на YouTube добавляет миниатюру, и когда вы нажимаетеDiv это добавить актуальный iframe: 

var youtube = $(".youtube");
youtube.each(function(url_index){
    var source = "https://img.youtube.com/vi/"+ youtube[url_index].dataset.embed +"/maxresdefault.jpg";
    var image = new Image();
    image.src = source;
    $(this).on('load', function() {
        youtube[url_index].appendChild(image);
    }(url_index));
    $(this).click(function() {
        $(this).html("");
        $(this).append('<iframe width="19200" height="800" frameborder="0" allow="autoplay" webkitAllowFullScreen mozallowfullscreen allowFullScreen src="https://www.youtube.com/embed/'+youtube[url_index].dataset.embed+'?&showinfo=0&autoplay=1"></iframe>');
    });
});

И, наконец, это мои настройки bxSlider: 

$('.bxslider').bxSlider({
            auto: true,
            easing: 'swing',
            captions: false,
            autoControls: false,
            pause: 000,
            video: true,
            useCSS: false,
            adaptiveHeight: false,
            slideMargin: 0,
            pager: false,
            controls: true
        });
...