YouTube API loadVideoById startSeconds 不起作用 [英] YouTube API loadVideoById startSeconds not working
问题描述
我为我嵌入的一些 youtube 视频创建了一个章节选择器.这种方法曾经有效,但最近停止了.我无法弄清楚发生了什么.
我使用他们推荐的格式,但使用 loadVideoById 来显示每一章
<div id="玩家"></div><script type="text/javascript">var tag = document.createElement('script');tag.src = "http://www.youtube.com/iframe_api";var firstScriptTag = document.getElementsByTagName('script')[0];firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);var 播放器;函数 onYouTubeIframeAPIReady() {player = new YT.Player('玩家', {宽度:'625',videoId: 'FE5jN0rqMtM',事件:{'onStateChange': onPlayerStateChange},玩家变量:{相对:0,wmode:不透明"}});}函数 onPlayerStateChange(evt) {如果(evt.data == 0){$('#video_popup').removeClass('hide_pop');$('#video_popup').addClass('display_pop');}否则如果(evt.data == -1){$('#video_popup').removeClass('display_pop');$('#video_popup').addClass('hide_pop');}别的 {$('#video_popup').removeClass('display_pop');$('#video_popup').addClass('hide_pop');}}函数chapter1(){player.loadVideoById({'videoId': 'FE5jN0rqMtM', 'startSeconds': 0});}函数chapter2(){player.loadVideoById({'videoId': 'FE5jN0rqMtM', 'startSeconds': 63});}函数chapter3(){player.loadVideoById({'videoId': 'FE5jN0rqMtM', 'startSeconds': 135});}<div id="video_popup" class="hide_pop"><div class="video_layover"><div class="promo">感谢收看!<br/><br/></div><div class="link"><a href="javascript:chapter1();">重放视频</a></div>
<div style="margin: 0 auto 20px auto; width:625px; height:98px; text-align:center;"><ul class="玩家"><a href="javascript:chapter1();"><li>第一章</li></a><a href="javascript:chapter2();"><li>第2章</li></a><a href="javascript:chapter3();"><li>第3章</li></a>
如果您遇到类似TypeError: ytPlayer.loadVideoById is not a function"的错误,那么我相信你必须等待 onReady 事件触发.
这是我使用的示例代码(部分):
var ytPlayer;var ytPlayerIsReady = false;//此方法仅在全局范围内定义时才有效!!window.onYouTubeIframeAPIReady = 函数 () {ytPlayer = new YT.Player('ytplayer', {玩家变量:{启用jsapi: 1,控制:0,FS: 1,自动播放:1,相对:0,显示信息:0,适度品牌:1},事件:{上就绪:上就绪,onError: onError,onStateChange: onStateChange}});};//调用 iframe api 的 youtube 代码var tag = document.createElement('script');tag.src = "https://www.youtube.com/iframe_api";var firstScriptTag = document.getElementsByTagName('script')[0];firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);函数 onError(event) {console.log("错误代码" + event.data);}函数 onStateChange(event) {console.log("将状态更改为" + event.data);}函数 onReady(事件){ytPlayerIsReady = 真;console.log("我准备好了");}window.myVideoPlayer = {初始化:功能(选项){//一些任意代码...//诀窍是触发 options.callback,//包含所有需要的逻辑函数超时(){设置超时(函数(){如果(假 === ytPlayerIsReady){暂停();}别的 {如果(选项.回调){options.callback();}}}, 1000);}暂停();}};myVideoPlayer.init({回调:函数(){//现在 youtube api 已准备就绪,您应该可以调用//loadVideoById 没有问题(至少对我有用)//ytPlayer.removeEventListener('onStateChange');//ytPlayer.addEventListener('onStateChange', '_myYtPlayerOnChange');//ytPlayer.loadVideoById({//视频 ID: 'xxxx',//开始秒数:12//});}});
I created a chapter selector for some youtube videos I was embedding. This method used to work but has stopped recently. I can't figure out what's going on.
I'm using their recommended format but use loadVideoById to show each chapter
<div class="wrapper">
<div id="player"></div>
<script type="text/javascript">
var tag = document.createElement('script');
tag.src = "http://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
width: '625',
videoId: 'FE5jN0rqMtM',
events: {
'onStateChange': onPlayerStateChange
},
playerVars:{
rel: 0,
wmode: "opaque"
}
});
}
function onPlayerStateChange(evt) {
if (evt.data == 0) {
$('#video_popup').removeClass('hide_pop');
$('#video_popup').addClass('display_pop');
}
else if (evt.data == -1) {
$('#video_popup').removeClass('display_pop');
$('#video_popup').addClass('hide_pop');
}
else {
$('#video_popup').removeClass('display_pop');
$('#video_popup').addClass('hide_pop');
}
}
function chapter1() {
player.loadVideoById({'videoId': 'FE5jN0rqMtM', 'startSeconds': 0});
}
function chapter2() {
player.loadVideoById({'videoId': 'FE5jN0rqMtM', 'startSeconds': 63});
}
function chapter3() {
player.loadVideoById({'videoId': 'FE5jN0rqMtM', 'startSeconds': 135});
}
</script>
<div id="video_popup" class="hide_pop">
<div class="video_layover">
<div class="promo">Thank you for watching!<br /><br /></div>
<div class="link"><a href="javascript: chapter1();">Replay Video</a></div>
</div>
</div>
<div style="margin: 0 auto 20px auto; width:625px; height:98px; text-align:center;">
<ul class="player">
<a href="javascript: chapter1();"><li>Chapter 1</li></a>
<a href="javascript: chapter2();"><li>Chapter 2</li></a>
<a href="javascript: chapter3();"><li>Chapter 3</li></a>
</ul>
</div>
If you experienced an error like "TypeError: ytPlayer.loadVideoById is not a function", then I believe you have to wait for the onReady event to fire.
Here is the sample code (part of) I use:
var ytPlayer;
var ytPlayerIsReady = false;
// this methods only works if defined in the global scope !!
window.onYouTubeIframeAPIReady = function () {
ytPlayer = new YT.Player('ytplayer', {
playerVars: {
enablejsapi: 1,
controls: 0,
fs: 1,
autoplay: 1,
rel: 0,
showinfo: 0,
modestbranding: 1
},
events: {
onReady: onReady,
onError: onError,
onStateChange: onStateChange
}
});
};
// youtube code for calling the iframe 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);
function onError(event) {
console.log("error with code" + event.data);
}
function onStateChange(event) {
console.log("change state to " + event.data);
}
function onReady(event) {
ytPlayerIsReady = true;
console.log("I'm ready");
}
window.myVideoPlayer = {
init: function (options) {
// some arbitrary code...
// the trick is to fire options.callback,
// which contains all the logic needed
function timeout() {
setTimeout(function () {
if (false === ytPlayerIsReady) {
timeout();
}
else {
if (options.callback) {
options.callback();
}
}
}, 1000);
}
timeout();
}
};
myVideoPlayer.init({
callback: function(){
// now the youtube api is ready, you should be able to call
// loadVideoById without problems (at least it worked for me)
// ytPlayer.removeEventListener('onStateChange');
// ytPlayer.addEventListener('onStateChange', '_myYtPlayerOnChange');
// ytPlayer.loadVideoById({
// videoId: 'xxxx',
// startSeconds: 12
// });
}
});
这篇关于YouTube API loadVideoById startSeconds 不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!