使用Flickity暂停下一张幻灯片上的YouTube视频

Question

我正在使用Flickity创建一个包含图像，视频和youtube嵌入的滑块（使用Wordpress高级自定义字段oEmbed）。

我想在flickity-select（下一张幻灯片）上暂停播放视频。

我的代码适用于视频嵌入，但我似乎无法暂停YouTube播放器。

滑块中有多个YouTube幻灯片，在iFrame中，高级自定义字段不允许我提供类名。

简化的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();
    }

......没有运气

有任何想法吗？

干杯!

Answer 1

我使用像这样的高级自定义字段oembed设置来添加“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-event：

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":""}', '*');    
});

这很有效。