Автовоспроизведение видео во всю ширину браузера с Owl Carousel 2

Я пытаюсь создать слайдер на всю ширину браузера с помощью Owl Carousel 2, следуя этому примеру http://www.owlcarousel.owlgraphic.com/demos/video.html

Однако в демоверсии показано только, как вставлять видео - в дополнение к этому я хочу иметь возможность отображать их на полную ширину (и высоту) браузера и автоматически воспроизводить их, когда пользователь достигает этого конкретного слайда. Я предполагаю, что это потребует использования API-интерфейсов Vimeo и YouTube, поскольку карусель немного ограничена, но не знаю, с чего начать. Идеи?


youtube vimeo video owl-carousel autoplay
person Staffan Estberg    schedule 14.10.2014    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Я делаю то же самое с OwlCarousel 2, и это было моим решением.

$('.owl-carousel').owlCarousel({       
   onInitialized:theThing,       
  });
function theThing(event){
  alert("")
  $(".active .owl-video-play-icon").trigger("click")
};

Я запускаю функцию щелчка при обратном вызове после инициализации Owl, чтобы видео появилось и начало воспроизводиться при запуске.

person Dvilla    schedule 09.12.2014

arrow_upward
0
arrow_downward

Чтобы установить видео на полную ширину и высоту браузера, вы можете добавить это в свой css и присвоить видео идентификатор 'videoID':

#videoID{
min-width: 100%;
min-height: 100%;
position: absolute;
}

это сделает любое видео на вашей странице минимальной шириной и высотой 100% от вашего видео и заставит его оставаться там, где оно есть.

редактировать: чтобы иметь автовоспроизведение видео, когда вы достигаете слайда, вы всегда можете сделать переменную, используя jquery или javascript, всякий раз, когда нажимается слайд справа, вы можете сделать переменную выше, например:

var counter = 0;

$(#slider).on('click', function(){
counter++;
});

теперь вы можете проверить счетчик следующим образом:

if (counter == 1){
    $('sliderright').on('click', function(){
        $document.getElementById('video').play();
    });
};

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

person Gerwin    schedule 27.10.2014