在 jQuery 中使用 Youtube 的 javascript API [英] Using Youtube's javascript API with jQuery

查看：32
本文介绍了在 jQuery 中使用 Youtube 的 javascript API的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我目前正在尝试将 YouTube API 用作 jQuery 插件的一部分，但遇到了一些问题.

YT api 的工作方式是加载 Flash 播放器，当它准备好时，它会向名为 onYouTubePlayerReady(playerId) 的全局函数发送回调用.然后，您可以将该 ID 与 getElementById(playerId) 结合使用，将 javascript 调用发送到 Flash 播放器(即，player.playVideo();).

您可以使用 player.addEventListener('onStateChange', 'playerState'); 将事件侦听器附加到播放器，这会将任何状态更改发送到另一个全局函数(在本例中为 playerState).

问题是我不确定如何将状态更改与特定玩家相关联.我的 jQuery 插件可以愉快地将多个视频附加到一个选择器并将事件附加到每个视频，但是当状态实际发生变化时，我无法跟踪它发生在哪个播放器中.

我希望一些示例代码可以让事情更清楚一些.下面的代码应该可以在任何 html 文件中正常工作.

<头><meta http-equiv="Content-Type" content="application/text+html;utf-8"/><title>沙盒</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 type="text/javascript" src="http://swfobject.googlecode.com/svn/tags/rc3/swfobject/src/swfobject.js"></script><script type="text/javascript">(功能($){$.fn.simplified = function() {返回 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);功能 onYouTubePlayerReady(playerId) {var player = $('#'+playerId)[0];player.addEventListener('onStateChange', 'playerState');}函数播放器状态(状态){控制台日志(状态)；}$(document).ready(function() {$('.secondary').simplified();});<身体><div id="容器"><div class="secondary">

<div class="secondary">

<div class="secondary">

<div class="secondary">

</html>

你会看到 console.log() 输出关于状态变化的信息，但是，就像我说的，我不知道如何判断它与哪个玩家相关联.

有人对此有什么想法吗?

抱歉，我还应该提到我曾尝试将事件调用包装在闭包中.

函数 onYouTubePlayerReady(playerId) {var player = $('#'+playerId)[0];player.addEventListener('onStateChange', function(state) {返回 playerState(state, playerId, player);});}函数 playerState(state, playerId, player) {控制台日志(状态)；控制台日志(玩家ID)；}

在这种情况下 playerState 永远不会被调用.这更令人沮丧.

解决方案

显然在 player 对象上调用 addEventListener 会导致脚本被用作传递给 flash 对象的 XML 属性中的字符串 - 这排除了闭包和就像，所以是时候来个老派的丑陋黑客了:

函数 onYouTubePlayerReady(playerId) {var player = $('#'+playerId)[0];player.addEventListener('onStateChange', '(function(state) { return playerState(state, "' + playerId + '"); })' );}函数 playerState(state, playerId) {控制台日志(状态)；控制台日志(玩家ID)；}

经过测试工作！

I'm currently trying to use the YouTube API as part of a jQuery plugin and I've run into a bit of a problem.

The way the YT api works is that you load the flash player and, when it's ready it will send a call back to a global function called onYouTubePlayerReady(playerId). You can then use that id combined with getElementById(playerId) to send javascript calls into the flash player (ie, player.playVideo();).

You can attach an event listener to the player with player.addEventListener('onStateChange', 'playerState'); which will send any state changes to another global function (in this case playerState).

The problem is I'm not sure how to associate a state change with a specific player. My jQuery plugin can happily attach more than one video to a selector and attach events to each one, but the moment a state actually changes I lose track of which player it happened in.

I'm hoping some example code may make things a little clearer. The below code should work fine in any html file.

<!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>

You'll see the console.log() outputtin information on the state changes, but, like I said, I don't know how to tell which player it's associated with.

Anyone have any thoughts on a way around this?

EDIT: Sorry, I should also mentioned that I have tried wrapping the event call in a closure.

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);
}

In this situation playerState never gets called. Which is extra frustrating.

解决方案

Edit:

Apparently calling addEventListener on the player object causes the script to be used as a string in an XML property that's passed to the flash object - this rules out closures and the like, so it's time for an old-school ugly hack:

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);
}

Tested & working!

这篇关于在 jQuery 中使用 Youtube 的 javascript API的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆