Question

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

我希望在轻拂事件select（下一张幻灯片）上暂停播放视频。

我的代码可与视频嵌入一起使用，但我似乎无法暂停YouTube播放器。

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

简化的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

Åsmund Sollihøgda 的回答对我来说对多个 YouTube 视频不起作用，所以我稍微调整了它并为当前视频添加了自动播放。

$slider.on( 'select.flickity', function( event, index ) {

            $('iframe').each(function( i, el ) {

                if( i == index ){
                    $(this)[0].contentWindow.postMessage('{"event":"command","func":"' + 'playVideo' + '","args":""}', '*'); 
                } else {
                    $(this)[0].contentWindow.postMessage('{"event":"command","func":"' + 'pauseVideo' + '","args":""}', '*'); 
                }
                
            });   

        });

Answer 2

我使用类似这样的高级自定义字段显示设置来添加“ 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;
?>

然后我将其添加到轻浮事件中：

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

这行得通。

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

2 个答案: