web-dev-qa-db-ja.com

スリックカルーセル：YouTubeビデオの再生中にスリック自動再生を一時停止します

カルーサルには http://kenwheeler.github.io/slick/ を使用しています。しかし、問題は、YouTubeビデオが再生されているときでも、自動再生がスリックを次へスライドすることです。

[〜＃〜] jsfiddle [〜＃〜]

現在、以下のJSを使用していますが、何も機能していないようです。

$('#main-slider').slick({
      slidesToShow: 1,
      slidesToScroll: 1,
      autoplay: true,
      autoplaySpeed: 3000,
      dots: true,
      infinite: true,
      adaptiveHeight: true,
      arrows: false
  });

  var video = $('#main-slider .slick-active').find('iframe').get(0).play();

  $('#main-slider').on('afterChange', function(event, slick, currentSlide, nextSlide){
    $('#main-slider .slick-slide').find('video').get(0).pause();
    var video = $('#main-slider .slick-active').find('video').get(0).play();
});

同様の質問はほとんどありませんが、解決策はありません。 YouTube api経由でビデオがオンになっているときに自動再生を停止する方法をスリックカルーセル

jqueryhtmlyoutubeslick.js
7
shubham agrawal

ここで解決策を見つけてください：

フィドル： http://jsfiddle.net/rijokpaul/pyzpg7st/2/

YouTube Iframe API で解決しました

    var tag = document.createElement('script');
    tag.id = 'iframe-demo';
    tag.src = 'https://www.youtube.com/iframe_api';
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

    var player;
    function onYouTubeIframeAPIReady() {
        var elems1 = document.getElementsByClassName('yt-player');
        for(var i = 0; i < elems1.length; i++) {

            player = new YT.Player(elems1[i], {
                events: {
                    //'onReady': onPlayerReady,
                    'onStateChange': onPlayerStateChange
                }
            });
        }
    }
    function onPlayerReady(event) {

    }
    function handleVideo(playerStatus) {
        if (playerStatus == -1) {
            // unstarted
            $('#main-slider').slick('slickPause');
        } else if (playerStatus == 0) {
            // ended
            $('#main-slider').slick('slickPlay');

        } else if (playerStatus == 1) {
            // playing = green                
            $('#main-slider').slick('slickPause');                
        } else if (playerStatus == 2) {
            // paused = red
            $('#main-slider').slick('slickPlay');
        } else if (playerStatus == 3) {
            // buffering = purple
        } else if (playerStatus == 5) {
            // video cued
        }
    }
    function onPlayerStateChange(event) {
        handleVideo(event.data);
    }

    $(function() {
        $('#main-slider').slick({
            slidesToShow: 1,
            slidesToScroll: 1,
            autoplay: true,
            autoplaySpeed: 3000,
            pauseOnFocus: false,
            pauseOnHover: false,
            dots: true,
            infinite: true,
            adaptiveHeight: true,
            arrows: false
        });

    });

    $('#main-slider').on('beforeChange', function(event, slick, currentSlide, nextSlide){
        $('.yt-player').each(function(){
            this.contentWindow.postMessage('{"event":"command","func":"' + 'pauseVideo' + '","args":""}', '*')
        });
    });

また、次のようにiframeを更新しました

<iframe class="yt-player" src="https://www.youtube.com/embed/lqj-QNYsZFk?controls=1&rel=0&enablejsapi=1"></iframe>

IframeURLの最後に&enablejsapi=1を追加し、yt-playerというクラスを使用しました。

[〜＃〜]更新[〜＃〜]

onReady関数にコメントし、slickbeforeChangeイベントを使用して、アクティブでないときにYouTubeビデオを一時停止しました。

1
Rijo K P

slickとvideojsを一緒に使用するのは難しく、特にyoutubeをソースとして使用すると、バグ（手動で処理する必要があるイベント/条件）が多すぎます。

コード内でこれを行う方法を説明します： fiddle

$(function(){
    var videoPlayed = false;

    function pauseSlider(){
        myslider.slick('slickPause');
    } 

    function playSlider(){
        myslider.slick('slickPlay');
    }

    /*
        assign videojs handle on pause and play dinamically.
        place this script before slick initialize only.
        because slick will cloned our element, so we will confuse to assign event handle on our videjs element

        but if you want it you change selector from `.video-slider` to `"#main-slider .slick-slide:not(.slick-cloned) .video-slider"`
    */
    //$("#main-slider .slick-slide:not(.slick-cloned) .video-slider").each(function(i,e){
    $(".video-slider").each(function(i,e){
        var id=$(this).attr('id');
        videojs.players[id].on("pause", function(){
            videoPlayed= false;
            playSlider();
        });
        videojs.players[id].on("play", function(){
            pauseSlider();
            videoPlayed= true;
        });
    });

    var myslider = $('#main-slider').slick({
        slidesToShow: 1,
        slidesToScroll: 1,
        /*
            when video play, slider is stopped. 
            but when event mouseout (hover out)/focus out triggered, 
            the slider will contine to play again.
            this is because pauseOnHover and pauseOnFocus default true.
            And because you want adaptiveHeight (full screen slider), 
            i assume you no need to doing pauseOnHover, because all time mouse will stay inside your slider.
            in this case we need to change pauseOnHover and pauseOnFocus to false
        */
        pauseOnHover:false,
        pauseOnFocus:false,
        autoplay: true,
        autoplaySpeed: 3000,
        dots: true,
        infinite: true,
        adaptiveHeight: true,
        arrows: false
    });

    $('.video-slider').click(function(){
        if(videoPlayed){
            /*
                actually this is will never executed. but sometimes 
                this will execute if user spam play pause on slow network.
                so we still leave here to handle if videojs pause event not called.
            */
            videojs($(this).attr('id')).pause();//pause video 1st then play the slider
            videoPlayed= false;
            playSlider();
        }else{
            pauseSlider();//pause slider 1st then play the video
            videojs($(this).attr('id')).play();
            videoPlayed= true;
        }
    });
});
0
plonknimbuzz