javascript - iframe 中有多个 YouTube 播放器，选择框以更改 channel - 停止播放视频

Question

我已经在这个问题上坚持了一个星期了。创建一个新问题比 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>

模板内有 1 个可见 div 和 3 个隐藏 div。使用选择框切换可见 div，以便您可以显示/隐藏 YT channel 。

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

不幸的是，如果您开始播放视频，然后更改 channel (显示/隐藏 div)，视频将继续播放，但不再可见。我尝试过使用“pauseVideo”、“stopVideo”等，但收到相同的错误“...不是函数”

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

Answer 1

您可以在此处查看工作代码 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();
            }
        });
      });