Youtube API有时还没有准备好

我试图使用他们的API包含YouTube视频。然而，有时（真随机大多数时候它的工作原理），当我点击我的播放按钮，我得到一个错误：Youtube API有时还没有准备好

Cannot read property 'playVideo' of undefined

这是我包括API：

var player; 
 

 
function onYouTubeIframeAPIReady() { 
 
    player = new YT.Player('video-intro', { 
 
     width: 100, 
 
     height: 100, 
 
     videoId: '<id>', 
 
     playerVars: { 
 
      color: 'white', 
 
      controls: 0, 
 
      showinfo: 0 
 
     } 
 
    }); 
 
} 
 

 
$(document).ready(function() { 
 
    $('#play-intro').click(function() { 
 
     player.playVideo(); 
 
     $('#video-intro').addClass('showvid'); 
 
    }); 
 
});

#video-intro { 
 
    display: none; 
 
    &.showvid { 
 
    display: block; 
 
    } 
 
}

<head> 
 
    <script src="https://www.youtube.com/iframe_api"></script> 
 
</head> 
 

 
<body> 
 
    <div id="video-intro"></div> 
 
    <a id="play-intro">Play</a> 
 
</body>

来源

2017-07-03 Cake

您需要调用事件才能启动播放器。在加载之前，您无法播放视频。不过为什么你会得到未定义的错误。我已添加事件和功能现在检查。更好的例子可以在这里enter link description here

var player; 
 

 
function onYouTubeIframeAPIReady() { 
 
    player = new YT.Player('video-intro', { 
 
     width: 100, 
 
     height: 100, 
 
     videoId: 'TZbUi0FP5AM', //T7Kmc7T-pjY (old, short) 
 
     playerVars: { 
 
      color: 'white', 
 
      controls: 0, 
 
      showinfo: 0 
 
     }, 
 
     events: { 
 
      'onReady': onPlayerReady, 
 
      'onStateChange': onPlayerStateChange 
 
      } 
 
    }); 
 
    
 
} 
 
function onPlayerReady(event) { 
 
     event.target.playVideo(); 
 
     } 
 
var done = false; 
 
function onPlayerStateChange(event) { 
 
    if (event.data == YT.PlayerState.PLAYING && !done) { 
 
     setTimeout(stopVideo, 6000); 
 
      done = true; 
 
     } 
 
} 
 
function stopVideo() { 
 
     player.stopVideo(); 
 
}  
 
     
 
     
 
     
 
$(document).ready(function() { 
 
    $('#play-intro').click(function() { 
 
     onYouTubeIframeAPIReady(); 
 
     
 
     $('#video-intro').addClass('showvid'); 
 
    }); 
 
});

#video-intro { 
 
    display: none; 
 
    &.showvid { 
 
    display: block; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<head> 
 
    <script src="https://www.youtube.com/iframe_api"></script> 
 
</head> 
 

 
<body> 
 
    <div id="video-intro"></div> 
 
    <a id="play-intro">Play</a> 
 
</body>

来源

2017-07-03 11:38:30

嗯，不过现在我的视频开始在后台播放已经（我听到这个声音，持续6秒钟）。我只希望它按下按钮时播放。另外，我的“关闭/停止”按钮不再有效。我的关闭按钮调用这些函数：player.pauseVideo（）; player.seekTo（0）;.但它给出了停止视频和pauseVideo不存在的错误。 – Cake

你的意思是你想播放器播放/暂停按钮，或者你需要外部按钮来播放？ @Cake –

检查这个例子http://jsfiddle.net/BeUFb/326/ @Cake –

发现不幸的是它不是在SO片段工作。尝试首先显示元素（您的CSS不起作用），然后致电player.playVideo()，否则会出现错误，如问题所示。

使用下面的CSS展现你的iframe，

#video-intro { 
    display: none; 
} 
#video-intro.showvid { 
    display: block !important; 
}

HTML：

<div id="video-intro"></div> 
<a id="play-intro">Play</a> 
<script src="https://www.youtube.com/iframe_api"></script> 
<script> 
    var player; 

    function onYouTubeIframeAPIReady() { 
    player = new YT.Player('video-intro', { 
     width: 100, 
     height: 100, 
     videoId: 'TZbUi0FP5AM', //T7Kmc7T-pjY (old, short) 
     playerVars: { 
     color: 'white', 
     controls: 0, 
     showinfo: 0 
     } 
    }); 
    } 
    document.getElementById("play-intro").addEventListener("click", function() { 
    document.getElementById('video-intro').className = 'showvid'; 
    player.playVideo(); 
    }); 
</script>

Fiddle

来源

2017-07-03 12:00:20

Youtube API有时还没有准备好

回答

相关问题