Пауза YouTube видео на следующем слайде с Flickity - PullRequest
Новая
       80

Пауза YouTube видео на следующем слайде с Flickity

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

Я использую Flickity для создания слайдера, содержащего изображения, видео и вставки на YouTube (с помощью расширенных пользовательских полей Wordpress oEmbed ).

Я хочу приостановить воспроизведение видео на событии flickity , выбрать (следующий слайд).

Мой код работает с видео-встраиванием, но я не могу остановить проигрыватель YouTube.

В слайдере есть несколько слайдов YouTube, которые в рамках iFrames не позволяют мне давать имена классов.

Упрощенная структура HTML: 

<div class="carousel">
    <img src="image" />
    <div class="video"><video src="somevideo" /></div>
    <div class="video"><iframe>YOUTUBE-EMBED</iframe></div>
</div>

Мой JavaScript: 

$('.carousel').flickity({
    // slider options
});

var $carousel = $('.carousel').flickity();
$carousel.on( 'select.flickity', function( event, index ) {
    $('.video').find('video').each(function() {
        this.pause();
    });
});

Функция паузы работает со встроенным, но не с. Есть идеи?

Я пробовал с: 

    $('.video').find('iframe').each(function() {
        ytplayer.pauseVideo();
        this.pauseVideo();
    });

И 

    if (ytplayer) {
        ytplayer.pauseVideo();
    }

... без везения

Есть идеи?

Ура!

1 Ответ

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

Я использовал расширенные настройки настраиваемых полей, например, для добавления «enablejsapi»: 

<?php
$iframe = get_sub_field('url');
// use preg_match to find iframe src
preg_match('/src="(.+?)"/', $iframe, $matches);
$src = $matches[1];
// add extra params to iframe src
$params = array(
    'enablejsapi' => 1
);
$new_src = add_query_arg($params, $src);
$iframe = str_replace($src, $new_src, $iframe);
// add extra attributes to iframe html
$attributes = 'class="youtube"';

$iframe = str_replace('></iframe>', ' ' . $attributes . '></iframe>', $iframe);

echo $iframe;
?>

Затем я добавил это к событию flickety: 

var $carousel = $('.content-fields-carousel').flickity();
$carousel.on( 'select.flickity', function( event, index ) {
    $('.video').find('video').each(function() {
        this.pause();
    });
    $('iframe')[0].contentWindow.postMessage('{"event":"command","func":"' + 'pauseVideo' + '","args":""}', '*');    
});

Это сработало.

...