在 jQuery 中加载 YouTube API
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18139277/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Loading YouTube API in jQuery
提问by Daniel
I'm trying to load YouTube's iframe API. So far, all I'm trying to do is make and load the player. It seems to load the API, but then not recognize "YT.Player()" as a constructor. The exact error I'm getting at that line, in the chrome js console, is:
我正在尝试加载 YouTube 的 iframe API。到目前为止，我要做的就是制作和加载播放器。它似乎加载了 API，但随后无法将“YT.Player()”识别为构造函数。在 chrome js 控制台中，我在该行遇到的确切错误是：
Uncaught TypeError: undefined is not a function
So... What in the world am I doing wrong? I've thrown console.log statements all over this thing, and tried rewriting it in a few ways. I've tried copying the api into a local file. I've tried loading it with regular script tags. I've tried loading it with the wacky DOM Modification they used in the api reference at https://developers.google.com/youtube/iframe_api_reference. I'm pretty sure the code below should work:
所以......我到底做错了什么？我已经在这件事上抛出了 console.log 语句，并尝试以几种方式重写它。我试过将 api 复制到本地文件中。我试过用常规脚本标签加载它。我尝试使用他们在https://developers.google.com/youtube/iframe_api_reference的 api 参考中使用的古怪 DOM 修改加载它。我很确定下面的代码应该可以工作：
function youtubeAPIReady(script, textStatus, jqXHR)
{
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'CxTtN0dCDaY'
});
}
function readyFunction()
{
$.getScript("https://www.youtube.com/iframe_api", youtubeAPIReady);
}
jQuery(document).ready(readyFunction);
Any help?
有什么帮助吗？
采纳答案by Simon Robb
Quote from http://api.jquery.com/jQuery.getScript/
引自http://api.jquery.com/jQuery.getScript/
The callback is fired once the script has been loaded but not necessarily executed.
一旦脚本加载但不一定执行，就会触发回调。
The API probably hasn't run by the time you call YT.Player()
API 可能在您调用时尚未运行 YT.Player()
回答by Jeff Posnick
You can borrow the technique used in YouTube Direct Liteto defer loading the JavaScript until it's explicitly needed:
您可以借用YouTube Direct Lite 中使用的技术来推迟加载 JavaScript，直到明确需要它：
var player = {
playVideo: function(container, videoId) {
if (typeof(YT) == 'undefined' || typeof(YT.Player) == 'undefined') {
window.onYouTubeIframeAPIReady = function() {
player.loadPlayer(container, videoId);
};
$.getScript('//www.youtube.com/iframe_api');
} else {
player.loadPlayer(container, videoId);
}
},
loadPlayer: function(container, videoId) {
new YT.Player(container, {
videoId: videoId,
width: 356,
height: 200,
playerVars: {
autoplay: 1,
controls: 0,
modestbranding: 1,
rel: 0,
showInfo: 0
}
});
}
};
回答by user151496
poor man's solution, but ...
穷人的解决方案，但是......
function readyYoutube(){
if((typeof YT !== "undefined") && YT && YT.Player){
player = new YT.Player('player', {
...
});
}else{
setTimeout(readyYoutube, 100);
}
}
回答by Simon Robb
I can't speak for the jQuery solution, but try using the stock standard javascript. In any case you won't have to wait for the document to be loaded (this code should sit outside $(document).ready())
我不能说 jQuery 解决方案，但尝试使用股票标准 javascript。在任何情况下，您都不必等待加载文档（此代码应该放在外面$(document).ready()）
// Load the YouTube API 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);
// Create the player object when API is ready
var player;
window.onYouTubeIframeAPIReady = function () {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'CxYyN0dCDaY'
});
};
回答by Alex Lomakin
I've solved this issue by combining approaches of Simon and user151496.
我通过结合 Simon 和 user151496 的方法解决了这个问题。
The code:
编码：
<script>
// load API
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// define player
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '360',
width: '640'
});
}
$(function () {
// load video and add event listeners
function loadVideo(id, start, end) {
// check if player is defined
if ((typeof player !== "undefined")) {
// listener for player state change
player.addEventListener('onStateChange', function (event) {
if (event.data == YT.PlayerState.ENDED) {
// do something
}
});
// listener if player is ready (including methods, like loadVideoById
player.addEventListener('onReady', function(event){
event.target.loadVideoById({
videoId: id,
startSeconds: start,
endSeconds: end
});
// pause player (my specific needs)
event.target.pauseVideo();
});
}
// if player is not defined, wait and try again
else {
setTimeout(loadVideo, 100, id, start, end);
}
}
// somewhere in the code
loadVideo('xxxxxxxx', 0, 3);
player.playVideo();
});
</script>
回答by Albin
Remove the add block from your browser and try again. Its worked for me.
从浏览器中删除添加块，然后重试。它对我有用。
