gpt4 book ai didi

javascript - YouTube API onReady 不起作用

转载 作者:行者123 更新时间:2023-11-28 11:04:59 26 4
gpt4 key购买 nike

这是我的代码:加载后,它应该调用事件--“onReady”,然后在浏览器控制台中打印出“My player is 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>

这是登录浏览器控制台: enter image description here

最佳答案

您需要修改:

首先:从 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>

关于javascript - YouTube API onReady 不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28801453/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com