YouTube API OnStateChange 监听器在切换 SRC Attr 后停止工作
Posted
技术标签:
【中文标题】YouTube API OnStateChange 监听器在切换 SRC Attr 后停止工作【英文标题】：YouTube API OnStateChange Listener Stops Working After Switch SRC Attr 【发布时间】：2013-11-30 01:08:16 【问题描述】：我正在尝试以最简洁的方式更改在 YouTube iframe 中播放的视频，几个月前我让这段代码正常工作，但 YouTube 更改了他们的 API，它对我停止工作了。现在，在我关闭视频的 SRC 属性以切换正在播放的视频后，onPlayerStateChange 事件没有触发。我是编码的业余爱好者，所以我可能在这里遗漏了一些简单的东西，但任何输入都将不胜感激。 下面是加载 YouTube 视频的代码，当它结束时，会自动弹出一个警报。但是，当您单击按钮并通过切换 SRC 属性来切换视频时，警报功能停止工作，就好像整个 onPlayerStateChange 功能停止工作一样。我无法让它在 jsfiddle 中运行，但可以在http://thetunedrop.com/test.html找到一个现场演示的链接@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<div id="player"></div>
<button class="button" data-youtubeid="b-3BI9AspYc">BUTTON</button>
</body>
</html>
<script type="text/javascript" src="jquery/jquery.min.js"></script>
<script type="text/javascript" src="jquery/js/jquery-ui-1.8.22.custom.min.js"></script>
<script src="http://www.youtube.com/player_api"></script>
<script>
// create youtube player
var player;
function onYouTubePlayerAPIReady()
player = new YT.Player('player',
height: '390',
width: '640',
videoId: '0Bmhjf0rKe8',
events:
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
);
// autoplay video
function onPlayerReady(event)
event.target.playVideo();
// when video ends
function onPlayerStateChange(event)
if(event.data === 0)
alert('done');
function load_ytid(youtubeid)
$("#player").attr("src", "http://www.youtube.com/embed/" + youtubeid + "?fs=1&autoplay=1");
$(document).ready(function()
$(".button").on("click", function()
var youtubeid = $(this).data("youtubeid");
load_ytid(youtubeid);
);
);
</script>
【问题讨论】：
【参考方案1】：试试这个：
<!DOCTYPE html>
<html>
<body>
<script src="jquery-1.10.2.min.js"></script>
<!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
<div id="player"></div>
<button class="button" data-youtubeid="b-3BI9AspYc">BUTTON</button>
<script>
// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var player;
function onYouTubeIframeAPIReady()
player = new YT.Player('player',
height: '390',
width: '640',
videoId: '0Bmhjf0rKe8',
playerVars: 'autoplay': 1, 'controls': 1 ,
events:
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
);
var playerReady = false;
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event)
playerReady = true;
// 5. The API calls this function when the player's state changes.
// The function indicates that when playing a video (state=1),
// the player should play for six seconds and then stop.
function onPlayerStateChange(event)
if (event.data == YT.PlayerState.ENDED )
alert('done');
$(".button").on("click", function()
player.loadVideoById("Vw4KVoEVcr0", 0, "default");
);
</script>
</body>
</html>
这里的小提琴：http://jsfiddle.net/QtBlueWaffle/8bpQ8/1/
希望对你有帮助
【讨论】：
【参考方案2】：我遇到了同样的问题（我认为）...我希望用户能够为多个播放器更改内容，这对我有用：我调用 youtube api 并附加了 onload 功能到新的 Youtubelink，这样每次 iframe 更改时都会重新加载。
我的 HTML：
<iframe onload="floaded1()" id="player1"
src="http://www.youtube.com/embed/0Bmhjf0rKe8
?enablejsapi=1&rel=0&showinfo=2&iv_load_policy=3&modestbranding=1"
frameborder="0" allowfullscreen> </iframe>
我的 JS：
function floaded1()
player1 = new YT.Player('player1',
events:
'onStateChange': function (event)
if (event.data == 0)
alert('done');
;
);
我用视频选择器加载的内容：
html += '<iframe onload="floaded1()" id="player1"
src="http://www.youtube.com/embed/'+YouTubeVideoId+'?enablejsapi=1&rel=0&
showinfo=2&iv_load_policy=3&modestbranding=1" frameborder="0" allowfullscreen>
</iframe>';
【讨论】：
以上是关于YouTube API OnStateChange 监听器在切换 SRC Attr 后停止工作的主要内容，如果未能解决你的问题，请参考以下文章
YouTube API OnStateChange 监听器在切换 SRC Attr 后停止工作
如果播放由 postMessage 触发，则不会触发 Youtube 的 onStateChange