当src发生变化时,将youtube iframe api事件传递给onstatechange

时间:2015-08-14 03:32:21

标签: javascript youtube youtube-iframe-api

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

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

1 个答案:

答案 0 :(得分:0)

当玩家准备好时,为什么不提示播放列表?您可以将视频ID保存在一个数组中......如果您不想要的是,请在下方发表评论,我会尽最大努力改变视频ID。

CREATE FUNCTION dbo.asciiCodeInteger (@string AS VARCHAR(3))
    RETURNS int
    AS
    BEGIN
      DECLARE @result int;
      DECLARE @char CHAR(1);
      DECLARE @position int;
      SET @position = 1;
      SET @result = 0;

      WHILE @position <= LEN(@string)
      BEGIN
        SET @char = SUBSTRING(@string, @position, 1);
        SET @result = @result + ASCII(@char);
        SET @position = @position + 1
      END
      RETURN (@result);
    END

JS Fiddle - Working Demo

  

<强> YouTube JavaScript Player API Reference

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

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