我正在处理一个网站,其中有大量嵌入的YouTube视频,客户希望在视频停止播放时显示弹出窗口。
我查看了YouTube API,似乎有一种方法可以检测视频何时结束:
http://code.google.com/apis/youtube/js_api_reference.html
但是由于这些视频已经全部在网站上(通过粘贴嵌入代码手动添加了数千个),所以我不能像该页面上所提到的那样嵌入视频。
有没有办法在不更改任何现有视频的情况下,利用JavaScript检测这些视频的结束?
我正在处理一个网站,其中有大量嵌入的YouTube视频,客户希望在视频停止播放时显示弹出窗口。
我查看了YouTube API,似乎有一种方法可以检测视频何时结束:
http://code.google.com/apis/youtube/js_api_reference.html
但是由于这些视频已经全部在网站上(通过粘贴嵌入代码手动添加了数千个),所以我不能像该页面上所提到的那样嵌入视频。
有没有办法在不更改任何现有视频的情况下,利用JavaScript检测这些视频的结束?
这可以通过YouTube播放器API实现:
工作示例:
<div id="player"></div>
<script src="http://www.youtube.com/player_api"></script>
<script>
// create youtube player
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('player', {
width: '640',
height: '390',
videoId: '0Bmhjf0rKe8',
events: {
onReady: onPlayerReady,
onStateChange: onPlayerStateChange
}
});
}
// autoplay video
function onPlayerReady(event) {
event.target.playVideo();
}
// when video ends
function onPlayerStateChange(event) {
if(event.data === 0) {
alert('done');
}
}
</script>
playerVars:{autoplay:'1'}
添加到初始化参数中。有关更多信息,请参见https://developers.google.com/youtube/player_parameters。 - anon向当前页面的iframe注入jscript,添加onYoutubePlayerReady必须包含的函数。 http://shazwazza.com/post/Injecting-JavaScript-into-other-frames.aspx
添加事件监听器等。
enablejsapi=1
。如果它们在数据库中,更改src
属性应该相当容易。如果它们是静态插入到 HTML 文件中的,则可能需要一些正则表达式。 - Erin