如何动态更改 YouTube 播放器的选项

Question

我有一个聊天室，为了练习目的，我正在改进它； node.js 服务器上已经运行了 socket.io，但我决定制作自己的收音机。

这是属于收音机的代码：

HTML：

<div data-video="1cDxhcAOpa8" 
    data-autoplay="1"
    data-loop="1"
    id="youtube-audio">
<form id="formMusica">
    <select id="selectGenero">
        <option value="edm" selected>EDM</option>
        <option value="rock">Rock</option>
     </select>
</form>

<script src="https://www.youtube.com/iframe_api"></script>
<script id="scriptYt" src="/yt.js"></script>

<script type="text/javascript">
    $(document).ready(function () {
        var $container = $('#youtube-audio');
        var $formGenero = $('#formMusica');
        var $select = $('#selectGenero');
        var $genero;

        $formGenero.submit(function (e) {
            e.preventDefault();
        });

        $select.change(function () {
            $genero = $select.val();
            buildPlayer();
        });

        var radios = [{
            'name': 'Pixl',
            'genre': 'EDM',
            'type': 'video',
            'ytd_id': 'cDxhcAOpa8'
        }, {
            'name': 'Best Rock Music',
            'genre': 'Rock',
            'type': 'playlist',
            'ytd_id': 'PLZN_exA7d4RVmCQrG5VlWIjMOkMFZVVOc'
        }];

        function buildPlayer() {
            var genreData = getGenreData();

            // Erase all to build again
            $container.html('');

            if (genreData.type === 'video') {
                $container.attr('data-video', genreData.ytd_id)
                    .removeAttr('data-listtype').removeAttr('data-list');
            }
            else if (genreData.type === 'playlist') {
                $container.attr('data-list', genreData.ytd_id)
                    .attr('data-listtype', genreData.type).removeAttr('data-video');
            }

            // #scriptYt's code will be below 
            $('#scriptYt').remove();

            $('body').append('<script id="scriptYt" src="/yt.js"><\/script>');
            onYouTubeIframeAPIReady();
        }

        function getGenreData() {
            for (i = 0; i < radios.length; i++) {
                if (radios[i].genre.toLowerCase() === $genero) {
                    return radios[i];
                }
            }
        }
    });
</script>

YT.JS：

var r;
function onYouTubeIframeAPIReady() {
var $container = $('#youtube-audio');

$container.append('<i class="fa fa-2x" id="youtube-icon"></i>');

var $icon = $('#youtube-icon');

$icon.css({ 'transition': '0.5s', 'cursor': 'pointer' });
$container.append('<div id="youtube-player"></div>');

var o = function (e) {
    var a = e ? 'fa-stop' : 'fa-play';

    if (a === 'fa-stop') {
        $icon.addClass('fa-stop');
        $icon.addClass('text-danger');

        $icon.removeClass('fa-play');
        $icon.removeClass('text-success');
    }
    else if (a === 'fa-play') {
        $icon.addClass('fa-play');
        $icon.addClass('text-success');

        $icon.removeClass('fa-stop');
        $icon.removeClass('text-danger');
    }
};

$container.click(function () {
    r.getPlayerState() === YT.PlayerState.PLAYING || r.getPlayerState() === YT.PlayerState.BUFFERING ? (r.pauseVideo(), o(!1)) : (r.playVideo(), o(!0));
});

r = new YT.Player('youtube-player', {
    height: '0',
    width: '0',
    videoId: $container.data('video'),
    playerVars: {
        listType: $container.data('listtype'),
        list:$container.data('list'),
        autoplay: $container.data('autoplay'),
        loop: $container.data('loop')
    },
    events: {
        onReady: function (e) {
            r.setPlaybackQuality('small'),
                o(r.getPlayerState !== YT.PlayerState.CUED)
        },
        onStateChange: function (e) {
            e.data === YT.PlayerState.ENDED && o(!1)
        }
    }
});
}

当您第一次加载页面时它工作得很好，然后当您选择其他类型时它保持相同的视频，我尝试删除 #youtube-audio 和脚本标签中的所有内容，然后再次插入标签并调用该方法，它加载每次都是相同的视频。

OBS：我很了解 JavaScript，但如果可能的话，我更喜欢 jQuery。

更新：感谢@matthewninja，r.loadVideoById() 有效，但我仍然需要处理播放列表，r.loadPlaylist() 不起作用。

Answer 1

无需销毁先前存在的播放器元素即可更改视频。根据to the YouTube Player API Reference page，你可以直接拨打player.loadVideoById(videoId)换歌。

话虽如此，这是我使用更改歌曲的按钮实现的解决方案：

HTML

<html>
<head>
<script
  src="http://code.jquery.com/jquery-3.2.1.js"
  integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
  crossorigin="anonymous"></script>
</head>
<body>
<div data-video="1cDxhcAOpa8" 
    data-autoplay="1"
    data-loop="1"
    id="youtube-audio">
<button onclick="changeSong()">change song</button>
<script src="https://www.youtube.com/iframe_api"></script>
<script id="scriptYt" src="yt.js"></script>
</div>
</body>
</html>

yt.js

var r;
function onYouTubeIframeAPIReady() {
var $container = $('#youtube-audio');

$container.append('<i class="fa fa-2x" id="youtube-icon"></i>');

var $icon = $('#youtube-icon');

$icon.css({ 'transition': '0.5s', 'cursor': 'pointer' });
$container.append('<div id="youtube-player"></div>');

var o = function (e) {
    var a = e ? 'fa-stop' : 'fa-play';

    if (a === 'fa-stop') {
        $icon.addClass('fa-stop');
        $icon.addClass('text-danger');

        $icon.removeClass('fa-play');
        $icon.removeClass('text-success');
    }
    else if (a === 'fa-play') {
        $icon.addClass('fa-play');
        $icon.addClass('text-success');

        $icon.removeClass('fa-stop');
        $icon.removeClass('text-danger');
    }
};

$container.click(function () {
    r.getPlayerState() === YT.PlayerState.PLAYING || r.getPlayerState() === YT.PlayerState.BUFFERING ? (r.pauseVideo(), o(!1)) : (r.playVideo(), o(!0));
});

r = new YT.Player('youtube-player', {
    height: '0',
    width: '0',
    videoId: $container.data('video'),
    playerVars: {
        listType: $container.data('listtype'),
        list:$container.data('list'),
        autoplay: $container.data('autoplay'),
        loop: $container.data('loop')
    },
    events: {
        onReady: function (e) {
            r.setPlaybackQuality('small'),
                o(r.getPlayerState !== YT.PlayerState.CUED)
        },
        onStateChange: function (e) {
            e.data === YT.PlayerState.ENDED && o(!1)
        }
    }
});
}

function changeSong(){
    r.loadVideoById("mHpZ-ZFZwiY");
}

当用户单击按钮时，视频将更改为由loadVideoById 提供的参数指定的视频。鉴于此功能，您应该可以更轻松地实施理想的解决方案。您可以修改 changeSong() 函数以接受来自 <select> 元素的参数。