Video html5 и слайдер owl.carousel 2
 

Есть такой код:

<div id="banner_slays_{{ module_id }}" class="owl-carousel">
{% for banner_id, banner in banners %}
<!-- генерация баннеров начало -->
<div class="scrollflow -slide-top s22">
    <div class="video_block video_block3 ani2">
        {% if banner.link %}
          <video id="video_slays{{ module_id }}{{ banner_id }}" width="100%" preload="metadata" class="scrollflow -slide-top -opacity" muted loop playsinline>
            <source src="{{ banner.link }}" type="video/mp4;codecs=&quot;avc1.42E01E, mp4a.40.2&quot;">
          </video>
        {% else %}
          <img src="{{ banner.image }}" alt="{{ banner.title }}">
        {% endif %}  
    </div>

<script>
let block_show{{ module_id }}{{ banner_id }} = null;
let video{{ module_id }}{{ banner_id }} = $("#video_slays{{ module_id }}{{ banner_id }}");
 
$(window).scroll(function(){
  let wt = $(window).scrollTop();
  let wh = $(window).height();
  let et{{ module_id }}{{ banner_id }} = $('#video_slays{{ module_id }}{{ banner_id }}').offset().top;
  let eh{{ module_id }}{{ banner_id }} = $('#video_slays{{ module_id }}{{ banner_id }}').outerHeight();
 
  if (wt + wh >= et{{ module_id }}{{ banner_id }} && wt + wh - eh{{ module_id }}{{ banner_id }} * 2 <= et{{ module_id }}{{ banner_id }} + (wh - eh{{ module_id }}{{ banner_id }})){
    if (block_show{{ module_id }}{{ banner_id }} == null || block_show{{ module_id }}{{ banner_id }} == false) {
      video{{ module_id }}{{ banner_id }}[0].play();
    }
    block_show{{ module_id }}{{ banner_id }} = true;
  } else {
    if (block_show{{ module_id }}{{ banner_id }} == null || block_show{{ module_id }}{{ banner_id }} == true) {
      video{{ module_id }}{{ banner_id }}[0].pause();
    }
    block_show{{ module_id }}{{ banner_id }} = false;
  }
});
</script>

</div>
<!-- генерация баннеров конец -->
{% endfor %}
</div>

$(document).ready(function() {
    $('#banner_slays_{{ module_id }}').owlCarousel({
        loop:false,
        margin:0,
        nav:true,
        items:1,
        autoplay:false,
        smartSpeed:2000,
        autoplaySpeed:2000,
        navText:['<i>←</i>','<i>→</i>']
    });
});

Он генерирует видео баннеры (всего 4 штуки). Благодаря owl.carousel 2, их можно листать влево/вправо. Для наглядности можно посмотреть здесь (кликните по ссылке). Вот этот блок: http://joxi.ru/Dr8YzazUJj6kPm



Изложение причины обращения:
Как вы уже заметили, в коде есть еще скрипт. Он проверяет - находится ли в видимой части ID конкретного видео, если да, тогда воспроизвести это видео. В противном случае нужно ставить его на паузу.

Эти действия нужны чтобы облегчить нагрузку, так как с тегом autoplay, все видео html 5 начинали одновременно воспроизводиться при загрузке страницы. Андроиду особо разницы нет, но айфон тупит и расколяется как печка. Даже браузер крашит.

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

Все это работает. В прошлой теме помог рони, за что ему отдельное спасибо.



Проблема:
Несмотря на то что все хорошо работает, возникла проблема. Дело в том, что при попадании в фокус экрана этого блока, начинают воспроизводиться сразу все 4 видео.



Решение:
Хочу с помощью этой же owl.карусели 2, заставить запускать только активное видео (текущий слайд) http://joxi.ru/Dr8YzazUJj6yZm А те что неактивные - останваливать. И только при переключении стрелок предыдущий/следующий слайд включать/отключать видео.

Активный слайд в карусели получает класс .active http://joxi.ru/DmBYKgKUg5yvbr
Возможно с помощью него воспроизводить видео с .owl-item.active video, а все скрытые .owl-item video ставить на паузу? Но делать это при кликах по кнопках влево/вправо.

В интернете видел такой код, но он не работает:

$(function(){
                var owl;

                $(document).ready(function () {

                    owl = $(".stage");

                    owl.owlCarousel({
                        autoplay: true,
                        autoplayHoverPause: true,
                        loop: true,
                        items: 1,
                        navigation: true, // Show next and prev buttons
                        slideSpeed: 300,
                        paginationSpeed: 400,
                        singleItem: true,afterAction: function(current) {
                            current.find('video').get(0).play();
                        }
                    });
                });


            });