YouTube API onPlayerReady 未触发 [英] YouTube API onPlayerReady not firing
问题描述
我专门创建了一个新页面来测试 API.当用
I created a new page especially to test the API. When copy pasting their example with
<div id="player"></div>
和
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'M7lc1UVf-VE',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
一切正常.
现在，当我删除 <div id="player"></div> 并用
Now when I remove the <div id="player"></div> and instead replace it with
<iframe id="player" type="text/html" width="640" height="390" src="http://www.youtube.com/embed/GuVq-TZ7AJM?enablejsapi=1" frameborder="0"></iframe>
它不再起作用.它永远不会出现在 onPlayerReady 或 onPlayerStateChange 中.奇怪的是，它昨晚有效，今天却没有.我附上了我的完整代码，以防万一.
It no longer works. It never goes in the onPlayerReady or onPlayerStateChange. The weird thing is it was working last night and today it isn't. I have attached my full code in case it may help.
<!DOCTYPE html>
<html>
<body>
<!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
<iframe id="player" type="text/html" width="640" height="390" src="http://www.youtube.com/embed/GuVq-TZ7AJM?enablejsapi=1" frameborder="0"></iframe>
<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', {
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
alert('test');
event.target.playVideo();
}
// 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.
var done = false;
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING && !done) {
setTimeout(stopVideo, 6000);
done = true;
}
}
function stopVideo() {
player.stopVideo();
}
</script>
</body>
</html>
推荐答案
Per issue 5670:
快速解决方法是添加 origin=http://www.example.com(替换使用您的服务器全域；确保您使用 http:// 或https:// 适用于您的网站)添加到 src= 属性播放器的 iframe 元素.请确保 origin=属性的值与主机域和 URL 方案完全匹配.例如
A quick fix is to add in the
origin=http://www.example.com(replace with your servers full domain; make sure you usehttp://orhttps://as appropriate for your site) to thesrc=attribute of the player's iframe element. Please make sure that theorigin=attribute's value exactly matches the host domain and URL scheme. E.g.
<iframe
type="text/html"
width="640"
height="480"
src="https://www.youtube.com/embed/VIDEO_ID?enablejsapi=1&origin=https://www.example.com"
frameborder="0">
</iframe>
这篇关于YouTube API onPlayerReady 未触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
