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

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>

模板内有一个可见的 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' 未定义。

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