Как предотвратить скрытие переполнения для элемента видео в IE 11, когда слайдер перемещается следующим и предыдущим? - PullRequest
Новая
       12

Как предотвратить скрытие переполнения для элемента видео в IE 11, когда слайдер перемещается следующим и предыдущим?

0 голосов
/ 08 июля 2019

Я использовал Owl Carousel, который имеет 3 HTML-5 видео и режим автоматического воспроизведения.Первый пункт - видео, а 4-й и 7-й - видео.Когда я работаю в IE-11, каждый третий элемент изображения содержит видео, которое не скрывается.

По сути, мои требования заключаются в том, что когда появляется элемент видео, видео должно воспроизводиться автоматически, а следующий элемент не запускается до конца видео.если конец видео, тогда следующий слайд.все это работает хорошо для Chrome и Mozilla, но в IE-11 есть элемент видео, который не скрывается должным образом.

var owl = window.jQuery('.slider_owl');
        window.jQuery('.slider_owl').owlCarousel({
            items: 1,
            loop: true,
            dots: false,
            video: true,
            autoplay:true,
            autoplayHoverPause:false,
            autoplayTimeout:5000, 
            responsive : {
                768 : {
                    onInitialized: function () {
                        if ($(".owl-item.active video", this.$element).length) {
                            $(".owl-item.active video", this.$element)[0].play();

                            owl.trigger('stop.owl.autoplay');
                            $(".owl-item.active video", this.$element).on('ended', function () {
                                owl.trigger('play.owl.autoplay')
                            });
                        }
                    },
                    onTranslated: function () {
                        if ($(".owl-item.active video", this.$element).length) {
                            $(".owl-item.active video", this.$element)[0].play();
                            owl.trigger('stop.owl.autoplay');
                            $(".owl-item.active video", this.$element).on('ended', function () {
                                owl.trigger('play.owl.autoplay')
                            });
                        }
                    }
                }
            }           
        });

1 Ответ

0 голосов
/ 09 июля 2019

Исходя из вашего описания, поскольку вы используете видеоэлемент HTML 5, я предлагаю вам попробовать добавить прослушиватель событий, чтобы определить, отображается видео или нет, а затем остановить / запустить owlCarousel.

Пожалуйста, обратитесь к этому примеру, чтобы добавить прослушиватель событий к элементу видео. 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="output"></div>
<video id="myVideo" width="320" height="176" controls autoplay>
    <source src="http://www.w3schools.com/tags/mov_bbb.mp4" type="video/mp4">
    <source src="http://www.w3schools.com/tags/mov_bbb.ogg" type="video/ogg">
</video>
<script>
    var media = document.getElementById('myVideo');

    // Playing event
    media.addEventListener("playing", function() {
        $("#output").html("Playing event triggered");
    });

    // Pause event
    media.addEventListener("pause", function() {
        $("#output").html("Pause event triggered");
    });

    //End event
    media.addEventListener("ended", function () {
        $("#output").html("Ended event triggered");
    });
</script>

Затем в функции воспроизведения и завершения вы можете запустить / остановить owlCarousel, используя следующую команду: 

owl.trigger('play.owl.autoplay')

или 

 owl.trigger('stop.owl.autoplay')

Более подробную информацию о OwlCarousel Autoplay вы можете проверить в этой статье .

...