I am working on a site that has a ton of embedded youtube videos, the client wants to show a popup whenever a video stops splaying.
我正在一个拥有大量嵌入式YouTube视频的网站上工作,客户希望在视频停止播放时显示弹出窗口。
I looked at the youtube api and there seems to be a way to detect when a video ends:
我查看了youtube api,似乎有办法检测视频何时结束:
http://code.google.com/apis/youtube/js_api_reference.html
http://code.google.com/apis/youtube/js_api_reference.html
but I can't embed the videos like they mentioned on that page since the videos are all already on the site (thousands that have been added manually by pasting embed code).
但我不能像他们在网页上提到的那样嵌入视频,因为视频已经在网站上(已经通过粘贴嵌入代码手动添加了数千个)。
Is there a way to detect the ending of these videos without changing any of the existing videos (using javascript)?
有没有办法检测这些视频的结尾而不更改任何现有的视频(使用JavaScript)?
2 个解决方案
#1
148
This can be done through the youtube player API:
这可以通过youtube播放器API完成:
http://jsfiddle.net/7Gznb/
Working example:
工作范例:
<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>
#2
-6
What you may want to do is include a script on all pages that does the following ... 1. find the youtube-iframe : searching for it by width and height by title or by finding www.youtube.com in its source. You can do that by ... - looping through the window.frames by a for-in loop and then filter out by the properties
您可能想要做的是在所有页面上包含一个脚本,执行以下操作... 1.找到youtube-iframe:按标题的宽度和高度搜索它,或者在源代码中查找www.youtube.com。您可以通过以下方式执行此操作: - 通过for-in循环遍历window.frames,然后按属性过滤掉
-
inject jscript in the iframe of the current page adding the onYoutubePlayerReady must-include-function http://shazwazza.com/post/Injecting-JavaScript-into-other-frames.aspx
在当前页面的iframe中注入jscript,添加onYoutubePlayerReady必须包含函数http://shazwazza.com/post/Injecting-JavaScript-into-other-frames.aspx
-
Add the event listeners etc..
添加事件监听器等。
Hope this helps
希望这可以帮助
#1
148
This can be done through the youtube player API:
这可以通过youtube播放器API完成:
http://jsfiddle.net/7Gznb/
Working example:
工作范例:
<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>
#2
-6
What you may want to do is include a script on all pages that does the following ... 1. find the youtube-iframe : searching for it by width and height by title or by finding www.youtube.com in its source. You can do that by ... - looping through the window.frames by a for-in loop and then filter out by the properties
您可能想要做的是在所有页面上包含一个脚本,执行以下操作... 1.找到youtube-iframe:按标题的宽度和高度搜索它,或者在源代码中查找www.youtube.com。您可以通过以下方式执行此操作: - 通过for-in循环遍历window.frames,然后按属性过滤掉
-
inject jscript in the iframe of the current page adding the onYoutubePlayerReady must-include-function http://shazwazza.com/post/Injecting-JavaScript-into-other-frames.aspx
在当前页面的iframe中注入jscript,添加onYoutubePlayerReady必须包含函数http://shazwazza.com/post/Injecting-JavaScript-into-other-frames.aspx
-
Add the event listeners etc..
添加事件监听器等。
Hope this helps
希望这可以帮助