iframe中有多个YouTube播放器,请选择框以更改频道-停止播放视频

时间:2018-06-19 17:22:03

标签: javascript jquery wordpress youtube

我已经坚持了一个星期。创建一个新问题比update先前的问题要干净得多。我有一个带有选择框的简单WP模板:

<select name="channelChooser" id="channelChooser">
    <option value="" selected>Please Select Platform</option>
    <option value="cqgd_ytpl">CQG Desktop</option>
    <option value="sc_ytpl">Sierra Chart</option>
    <option value="cqgq_ytpl">CQG Q Trader</option>
</select>

模板内有一个可见的div和3个隐藏的div。使用选择框,我切换可见的div,以便您可以显示/隐藏YT频道。

jQuery(document).ready(function() {
    $('#channelChooser').change(function () {
        var playerName = jQuery(this).closest('.embed-container').find('iframe').attr('id');
        if($(this).val() == 'cqgd_ytpl') {
           $('.ypt_wrapper').not('#cqgd_ytpl').hide();
           $('#cqgd_ytpl').show();
        } else if($(this).val() == 'sc_ytpl') {
            $('.ypt_wrapper').not('#sc_ytpl').hide();
            $('#sc_ytpl').show();
        } else if($(this).val() == 'cqgq_ytpl') {
            $('.ypt_wrapper').not('#cqgq_ytpl').hide();
            $('#cqgq_ytpl').show();
        }
    });
});

很遗憾,如果您开始播放视频,请更改视频继续播放但不再可见的频道(显示/隐藏div)。我尝试使用'pauseVideo','stopVideo'等,但遇到相同的错误'...不是函数'

如何制作全局停止功能,以便每次使用选择框时都停止当前播放的视频。 $(。ytpl-playing).stopVideo();未定义“ ytpl-playing”。

1 个答案:

答案 0 :(得分:2)

您可以在JSBin处查看工作代码。

我刚刚添加了所需的代码即可完成您的任务。随时根据需要进行更改。

jQuery(document).ready(function() {
        $('#channelChooser').change(function() {
            // $('#ytpl-player1').data("data-pl", this.value);
            var playerName = jQuery(this).closest('.embed-container').find('iframe').attr('id');
            if ($(this).val() == 'cqgd_ytpl') {
                $('.ypt_wrapper').not('#cqgd_ytpl').hide();
                $('#cqgd_ytpl').show();
                players["ytpl-player2"].stopVideo();
                players["ytpl-player3"].stopVideo();
            } else if ($(this).val() == 'sc_ytpl') {
                $('.ypt_wrapper').not('#sc_ytpl').hide();
                $('#sc_ytpl').show();
                players["ytpl-player1"].stopVideo();
                players["ytpl-player3"].stopVideo();
            } else if ($(this).val() == 'cqgq_ytpl') {
                $('.ypt_wrapper').not('#cqgq_ytpl').hide();
                $('#cqgq_ytpl').show();
                players["ytpl-player1"].stopVideo();
                players["ytpl-player2"].stopVideo();
            }
        });
      });