Ste*_*ike 20 javascript youtube api jquery events
我目前正在尝试将YouTube API用作jQuery插件的一部分,而且我遇到了一些问题.
YT api的工作方式是加载flash播放器,当它准备就绪时,它会将一个回调函数发送回一个名为的全局函数onYouTubePlayerReady(playerId).然后,您可以使用该ID结合getElementById(playerId)将javascript调用发送到Flash播放器(即player.playVideo();).
您可以将事件侦听器附加到播放器,使用player.addEventListener('onStateChange', 'playerState');该侦听器将任何状态更改发送到另一个全局函数(在本例中playerState).
问题是我不确定如何将状态变化与特定玩家联系起来.我的jQuery插件可以愉快地将多个视频附加到选择器并将事件附加到每个视频,但是当状态实际发生变化时,我会忘记它发生在哪个玩家身上.
我希望一些示例代码可以使事情更清晰一些.以下代码应该可以在任何html文件中正常工作.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="application/text+html;utf-8"/>
<title>Sandbox</title>
<link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.3.2");
google.load("jqueryui", "1.7.0");
</script>
<script type="text/javascript" src="http://swfobject.googlecode.com/svn/tags/rc3/swfobject/src/swfobject.js"></script>
<script type="text/javascript">
(function($) {
$.fn.simplified = function() {
return this.each(function(i) {
var params = { allowScriptAccess: "always" };
var atts = { id: "ytplayer"+i };
$div = $('<div />').attr('id', "containerplayer"+i);
swfobject.embedSWF("http://www.youtube.com/v/QTQfGd3G6dg&enablejsapi=1&playerapiid=ytplayer"+i,
"containerplayer"+i, "425", "356", "8", null, null, params, atts);
$(this).append($div);
});
}
})(jQuery);
function onYouTubePlayerReady(playerId) {
var player = $('#'+playerId)[0];
player.addEventListener('onStateChange', 'playerState');
}
function playerState(state) {
console.log(state);
}
$(document).ready(function() {
$('.secondary').simplified();
});
</script>
</head>
<body>
<div id="container">
<div class="secondary">
</div>
<div class="secondary">
</div>
<div class="secondary">
</div>
<div class="secondary">
</div>
</div>
</body>
</html>
您将看到有关状态更改的console.log()outputtin信息,但是,就像我说的,我不知道如何判断它与哪个玩家相关联.
有没有人想过这个方法呢？
编辑:对不起,我还应该提到我已经尝试在闭包中包装事件调用.
function onYouTubePlayerReady(playerId) {
var player = $('#'+playerId)[0];
player.addEventListener('onStateChange', function(state) {
return playerState(state, playerId, player); } );
}
function playerState(state, playerId, player) {
console.log(state);
console.log(playerId);
}
在这种情况下playerState永远不会被召唤.哪个更令人沮丧.
Gre*_*reg 23
编辑:
显然调用addEventListener该player对象会导致脚本被用作传递给flash对象的XML属性中的字符串 - 这会排除闭包等,所以现在是时候了解一个老派难看的黑客:
function onYouTubePlayerReady(playerId) {
var player = $('#'+playerId)[0];
player.addEventListener('onStateChange', '(function(state) { return playerState(state, "' + playerId + '"); })' );
}
function playerState(state, playerId) {
console.log(state);
console.log(playerId);
}
经过测试和工作!
小智 5
我正在使用Jquery SWFobject插件,SWFobject
在视频结尾添加&enablejsapi = 1非常重要
HTML:
<div id="embedSWF"></div>
jQuery的:
$('#embedSWF').flash({
swf: 'http://www.youtube.com/watch/v/siBoLc9vxac',
params: { allowScriptAccess: "always"},
flashvars: {enablejsapi: '1', autoplay: '0', allowScriptAccess: "always", id: 'ytPlayer' },
height: 450, width: 385 });
function onYouTubePlayerReady(playerId) {
$('#embedSWF').flash(function(){this.addEventListener("onStateChange", "onPlayerStateChange")});
}
function onPlayerStateChange(newState) {
alert(newState);
}
onYouTubePlayerReady必须在$(document).ready(function()之外才能被触发
| 归档时间： |
|
| 查看次数： |
33322 次 |
| 最近记录： |