当 src 更改时传递 youtube iframe api 事件 onstatechange

Question

所以我想我会用一个工作示例来更新它。我已经放弃了声明 iframe 标签，只是使用 iframe api 创建一个 iframe，然后通过带有数据属性的 id 加载播放器。下面是一个工作示例。因此，现在所有状态更改都通过 youtube 播放器一致地传递。因此脚本会将 iframe 加载到 Div #player 中，您可以使用 jquery 和 javascript 轻松地 loadVideoByID。

<div id="player"></div>
<script>
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var player;
function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
        playerVars: { 'autoplay': 0,},
        videoId: 'M7lc1UVf-VE',
        events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
        }
    });
}
function onPlayerReady(event) {
    alert('started');
}
function onPlayerStateChange(event) {        
     if(event.data === 0) {            
         alert('done');
     }
}
$( document ).on( "click", ".video-link", function(e) {
    e.preventDefault();
    var videoID = $(this).attr('data-videoID');
    player.loadVideoById(videoID);
});
</script>

然后使用具有类似数据属性的链接。

<a href="#" class="video-link"  data-videoID="youtube id here">Link</a>

Answer 1

除了播放按钮之外，为什么不在播放器准备好时提示播放列表呢？您可以将视频 ID 保存在一个数组中...如果这不是您要查找的内容，请在下方留言，我会尽我所能进行更改。

//Array of videos
var MyVideos=["E6RGMRamAFk","IHQr0HCIN2w","CogIXrea6A4"];
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
    events: {
     'onReady': onPlayerReady,
     'onStateChange': onPlayerStateChange
    }
  });
}
function onPlayerReady(event) {
//Player is ready, cue the array of videos into the playlist.
player.cuePlaylist(MyVideos);
}
function onPlayerStateChange(event) {
}

JS Fiddle - Working Demo

YouTube JavaScript Player API Reference

如果您有任何问题，请在下方留言，我会尽快回复您。

我希望这会有所帮助。快乐编码！