Youtube嵌入iframe - 事件不在本地发射 [英] Youtube Embed Iframe - Events Not Firing In Local
问题描述
我刚刚注意到当我在本地测试时，Youtube事件（onReady，onStateChange）不再触发，但是当我将代码上传到 JsFiddle 。我决定从 Youtube播放器API 复制并粘贴代码，我可以在此处验证它确实不起作用。还有其他人有这个问题吗？ Chrome，Firefox，IE，Safari和Opera都会出现此问题。
I've just noticed that the Youtube events (onReady, onStateChange) are no longer firing when I am testing in my local, but works when I upload the code to JsFiddle. I've decided to copy and paste the code from Youtube Player API where I am able to verify that it indeed is not working. Is anyone else having this issue? This issue occurs on Chrome, Firefox, IE, Safari, and Opera.
编辑 - 当我 console.log（播放器）; 在我的本地，我发现它缺少很多Youtube功能，例如 seekTo（）， setVolume（）， showVideoInfo（）存在于JsFiddle中。我不确定为什么会这样，但我相信这可能是我问题的根源。有什么想法吗？
EDIT - When I console.log(player); in my local, I see that it is missing a lot of Youtube functions such as seekTo(), setVolume(), showVideoInfo() which are present in JsFiddle. I am unsure why this is happening, but I believe this might be the root of my problem. Any ideas?
<!DOCTYPE html>
<html>
<body>
<!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
<div id="player"></div>
<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: '190',
width: '140',
videoId: 'M7lc1UVf-VE',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
console.log('ready');
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) {
console.log('change');
if (event.data == YT.PlayerState.PLAYING && !done) {
setTimeout(stopVideo, 6000);
done = true;
}
}
function stopVideo() {
player.stopVideo();
}
</script>
</body>
</html>
推荐答案
看来Youtube iframe API是目前已经破了，虽然我还没有看到正式确认。
参见：
编辑：以下是修复：< a href =https://code.google.com/p/gdata-issues/issues/detail?id=5670#c6\"rel =nofollow noreferrer> https://code.google.com/p/gdata -issues / issues / detail？id = 5670＃c6
以下是上述链接中答案的直接引用：
Here is a direct quote of the answer at the link above:
快点修复是添加原点= http://www.example.com （替换
与您的服务器完整域名;确保您使用适用于您网站的http：//或https：//
）到播放器的
iframe元素的src =属性。请确保origin = attribute的值
与主机域和URL方案完全匹配。例如
A quick fix is to add in the origin=http://www.example.com (replace with your servers full domain; make sure you use http:// or https:// as appropriate for your site) to the src= attribute of the player's iframe element. Please make sure that the origin= 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>
我正在与工程团队合作，以确定是否
origin =将要求继续前进或是否可以恢复这个新的
要求，但这是立即修复。在此期间道歉
的破损和缺乏高级通信。
I'm currently working with the engineering team to figure out whether origin= is going to be required moving forward or whether this new requirement can be reverted, but this is the immediate fix. Apologies for the breakage and lack of advanced communication in the meantime.
如果你使用YT.Player（）构造函数来创建iframe元素
对你而言这不是一个问题 - 对于
开发人员来说，这是一个边缘情况，他们明确地将iframe元素作为
页面HTML的一部分包含在内。
If you use the YT.Player() constructor to create the iframe element for you then this isn't be an issue—it's a bit of an edge case for developers who are explicitly including the iframe element as part of their page's HTML.
我实现了上面的修复程序，它对我有用。
I implemented the fix above, and it worked for me.
这篇关于Youtube嵌入iframe - 事件不在本地发射的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
