Youtube API onReady不起作用
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Youtube API onReady不起作用相关的知识，希望对你有一定的参考价值。
这是我的代码：加载后，它应该调用事件 - “onReady”，然后在浏览器控制台中打印出“我的播放器在onReady”。但它没有显示出来。基本上，这是YouTube API使用的一个非常简单的示例，但我在这里找不到什么问题。即使我已经按照youtube视频中的步骤操作了。
有帮助吗？先感谢您！！
<html>
<head>
<meta charset="UTF-8">
<title>THis is YOutube API testing </title>
</head>
<body>
<iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/02GcUZ6hgzo" frameborder="0" allowfullscreen></iframe>
<script>
//import YouTube API 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);
//create the YouTube Player
var player;
function onYouTubeIframeAPIReady() {
console.log("API is Ready");
player = new YT.Player("video", {
events:{
'onReady': onPlayerReady
}
});
}
function onPlayerReady() {
console.log("My plaer is onReady");
}
</script>
</body>
</html>
这是登录浏览器控制台：
答案
你没有正确地调用onPlayerReady()函数。
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
//create the YouTube Player
var player;
function onYouTubeIframeAPIReady() {
console.log("API is Ready");
player = new YT.Player("video", {
events:{
'onReady': onPlayerReady()
}
});
}
function onPlayerReady() {
console.log("My player is onReady");
}<iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/02GcUZ6hgzo" frameborder="0" allowfullscreen></iframe>另一答案
你需要修改：
第一步：使用脚本从youtube导入API。
<script async src="https://www.youtube.com/iframe_api"></script>
导入youtube API后，您可以开始编写视频播放器代码。
//create the YouTube Player
function onYouTubeIframeAPIReady() {
console.log("API is ready.")
var player;
player = new YT.Player('videoLoader'/*Specific your div ID here for display the video.*/, {
videoId: '34xO919uKdY', // Specific your video ID http://www.youtube.com/embed/videoIDHere
width: '560', // Specific width
height: '315', // Specific height
playerVars: {
end: 0, autoplay: 1, loop: 0, controls: 0, showinfo: 0, modestbranding: 1, fs: 0, cc_load_policty: 0, iv_load_policy: 3, autohide: 0
}, events: {
'onReady': onPlayerReady
}
});
}
function onPlayerReady() {
console.log("My player is onReady");
}
在此之后，你需要创建一个div，这个div包含你的视频。
//create DIV spacer
<div id="videoLoader"></div>
完成没有错误：
<html>
<head>
<meta charset="UTF-8">
<title>This is Youtube API test</title>
<script async src="https://www.youtube.com/iframe_api"></script>
<script>
//create the YouTube Player
function onYouTubeIframeAPIReady() {
console.log("API is ready.")
var player;
player = new YT.Player('videoLoader'/*Specific your div ID here for display the video.*/, {
videoId: '34xO919uKdY', // Specific your video ID http://www.youtube.com/embed/videoIDHere
width: '560', // Specific width
height: '315', // Specific height
playerVars: {
end: 0, autoplay: 1, loop: 0, controls: 0, showinfo: 0, modestbranding: 1, fs: 0, cc_load_policty: 0, iv_load_policy: 3, autohide: 0
}, events: {
'onReady': onPlayerReady
}
});
}
function onPlayerReady() {
console.log("My player is onReady");
}
</script>
</head>
<body>
<!--Create iframe with the video player-->
<div id="videoLoader"></div>
</body>
</html>
以上是关于Youtube API onReady不起作用的主要内容，如果未能解决你的问题，请参考以下文章
YouTube iframe API - onReady 和 onStateChanged 事件未触发
YouTube iFrame API“setPlaybackQuality”或“suggestedQuality”不起作用
YouTube Data API v3 在生产服务器上部署时不起作用 [关闭]