当src发生变化时，将youtube iframe api事件传递给onstatechange [英] Pass youtube iframe api events onstatechange when src changes

问题描述

所以我想我会用一个有效的例子来更新它。我已经放弃了iframe标签，只是使用iframe api创建了一个iframe，然后用id加载了一个带有data属性的播放器。以下是一个工作示例。所以现在所有状态变化都通过youtube播放器一直传递。因此，脚本会将iframe加载到Div #player中，您只需使用jquery和javascript轻松加载VideoByID。

So I figured I would update this with a working example. I have ditched stating the iframe tag and just used the iframe api to create an iframe and then loaded the player by id with a data attribute. Here is a working example below. So now all statechanges are passed consistently through the youtube player. So the script will load an iframe into the Div #player and you can just loadVideoByID pretty easily with jquery and javascript.

<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>

然后使用带有数据属性的链接。

And then use a link with a data-attribute like so.

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

推荐答案

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

Rather than having buttons to play, why not cue to playlist when the player is ready? You can hold the video ID's in an array... If this isn't what you're looking for just leave a comment below and I will change things the best I can to fit.

//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) {
}

< a href =http://jsfiddle.net/zpg2c9ts/9/ =nofollow> JS Fiddle - Working Demo

YouTube JavaScript播放器API参考

YouTube JavaScript Player API Reference

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

If you have any questions please leave a comment below and I will get back to you as soon as possible.

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

I hope this help. Happy coding!

这篇关于当src发生变化时，将youtube iframe api事件传递给onstatechange的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！