我已经设置了一些测试代码,加载到 youtube 视频中,然后在我计划停止视频的链接上加载 jquery 单击事件,但目前,当我单击该链接时,出现错误: Uncaught TypeError:对象 [object Object] 没有方法“stopVideo”
任何人都可以建议我可能会在哪里出错吗?
<div id="container">
<a href="#">This is the link</a>
<br /><br />
<br /><br />
<div id="player"></div>
</div>
<script>
var tag = document.createElement('script');
tag.src = "http://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'u1zgFlCw8Aw'
});
}
function onPlayerReady(event) {
event.target.playVideo();
}
$(document).ready(function() {
$('a').click(function(e) {
player.stopVideo();
e.preventDefault();
});
});
</script>
最佳答案
您的代码片段按 fiddle 中的预期工作。 。此外,由于 postMessage
实现的限制,YouTube Frame API 无法在 file:///
协议(protocol)上运行。
我之前创建了 YouTube API 的自定义实现,可通过 YouTube iframe API: how do I control a iframe player that's already in the HTML? 获取。 。我已在 file:///
协议(protocol)上成功执行了 stopVideo
方法。
如果您在线运行代码,我只能想到另一个原因:您试图在播放器准备好之前单击链接。要修复它,请合并您的函数:
function onPlayerReady(event) {
event.target.playVideo();
$('a').click(function(e) { //<--- Binds event to ALL anchors! Are you sure?
player.stopVideo();
e.preventDefault();
});
});
关于javascript - 关于在点击事件触发时停止 YouTube 视频的建议,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8185509/