Question

我正在使用easytabs.js来显示一些内容。其中一个标签是带有自定义图片的YouTube视频。单击自定义图像时播放YouTube视频。但是，我希望youtube视频在单击其他选项卡时暂停。

如果有人有任何想法，我很乐意听到他们的声音！

谢谢！

Answer 1

YouTube视频播放器有一个JavaScript APi，可用于处理页面上加载的视频。您可以在此处找到文档：https://developers.google.com/youtube/js_api_reference

正如您所见，请在加载时将其添加到视频网址：＆amp; enablejsapi 然后当它被加载时，它将调用onYoutubePlayerReady回调，之后玩家将可以调用player.playVideo（）和player.pauseVideo（）。

让我知道它是怎么回事。

更新：下面是示例，这应该在使用easytabs切换选项卡后暂停视频。我从他们的网站获得了easytabs代码，它有jQuery所以我认为这是一个要求，你已经拥有它。请记住在代码中更改tab div的容器ID，并设置您需要设置的任何easytab选项。

<script type="text/javascript">
    var yPlayer = false;
    function onYouTubePlayerReady(playerId) {
        yPlayer = document.getElementById(playerId);
    }

    $('#YOUR-TAB-CONTAINER-ID-HERE')
      .easytabs({
        //put your options here
      })
      .bind('easytabs:after', function(e, tab){
        if ( ! tab.hasClass('active') && ! tab.hasClass('collapsed') ) {
            yPlayer.pauseVideo();
        }
      });
</script>

更新2：根据您的评论，我提出了这个问题：

<script>
    $(function(){
        var player = false;

        var tag = document.createElement('script');
        tag.src = "https://www.youtube.com/player_api";
        var firstScriptTag = document.getElementsByTagName('script')[0];
        firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

        function onYouTubePlayerAPIReady() {
            player = new YT.Player('ytplayer', {
            height: '670',
            width: '470',
            videoId: 'nsjPrsmsll0 '
            });

            $('#YOUR-TAB-CONTAINER-ID-HERE')
            .easytabs({
                //put your options here
            })
            .bind('easytabs:after', function(e, tab){
                if ( ! tab.hasClass('active') && ! tab.hasClass('collapsed') ) {
                    player.pauseVideo();
                }
            });
        }
    });
</script>

将youtube视频iframe替换为：并使用我提供的JS代码。

使用easytabs.js暂停隐藏Div上的youtube视频

1 个答案: