如何创建动态jPlayer？

Question

下面是带有jQuery的jPlayer的代码。我必须创建jPlayer dynamic。

$("#jquery_jplayer_0").jPlayer({
        ready: function () {
            $(this).jPlayer("setMedia", {
                webmv: "http://....",
                poster: "http://...."
            });
        },
        play: function() { // To avoid both jPlayers playing together.
            $(this).jPlayer("pauseOthers");
        },
        repeat: function(event) { // Override the default jPlayer repeat event handler
            if(event.jPlayer.options.loop) {
                $(this).unbind(".jPlayerRepeat").unbind(".jPlayerNext");
                $(this).bind($.jPlayer.event.ended + ".jPlayer.jPlayerRepeat", function() {
                    $(this).jPlayer("play");
                });
            } else {
                $(this).unbind(".jPlayerRepeat").unbind(".jPlayerNext");
                $(this).bind($.jPlayer.event.ended + ".jPlayer.jPlayerNext", function() {
                    $("#jquery_jplayer_1").jPlayer("play", 0);
                });
            }
        },
        swfPath: "js",
        supplied: "webmv",
        size: {
            width: "640px",
            height: "360px",
            cssClass: "jp-video-360p"
        },      
        cssSelectorAncestor: "#jp_container_0"
    });

我有20个jPlayers的页面加载。所以我不想把这个写20遍。

for(var i=1;i<=20;i++){

       $("#jquery_jplayer_"+i).jPlayer({
            ready: function () {
                $(this).jPlayer("setMedia", {
                    webmv: "http://..",
                    poster: "http://.."
                });
            },
            play: function() { // To avoid both jPlayers playing together.
                $(this).jPlayer("pauseOthers");
            },
            repeat: function(event) { // Override the default jPlayer repeat event handler
                if(event.jPlayer.options.loop) {
                    $(this).unbind(".jPlayerRepeat").unbind(".jPlayerNext");
                    $(this).bind($.jPlayer.event.ended + ".jPlayer.jPlayerRepeat", function() {
                        $(this).jPlayer("play");
                    });
                } else {
                    $(this).unbind(".jPlayerRepeat").unbind(".jPlayerNext");
                    $(this).bind($.jPlayer.event.ended + ".jPlayer.jPlayerNext", function() {
                        $("#jquery_jplayer_"+(i-1)).jPlayer("play", 0);
                    });
                }
            },
            swfPath: "jplayer/js",
            supplied: "webmv",
            size: {
                width: "640px",
                height: "360px",
                cssClass: "jp-video-360p"
            },      
            cssSelectorAncestor: "#jp_container_"+i
        });
    }

我想应用上面的代码。但它对我不起作用。也许它不会创建动态对象。使用eval()但不起作用。

Answer 1

也许这可能会给你一些方向，让你开始：

JS

尝试这样做:创建一个javascript文件，该文件创建一个jplayer，如下所示。我使用this.html =Ext.String.format(YourHtmlCodeForJplayer)定义html；

最后，您可以调用jquery来实例化它，为此，我使用: on(afterrender，function(){YourJqueryCodeHereThatCallsTheJplayerLibrary})

别忘了为每个玩家使用唯一的ID。(我有一个组件，容器和接口ID)音频文件不能播放也有问题，但这可能只是我使用的资源服务。对于普通的mp4文件，没有太大的问题。

在实例化jquery时，尝试使用jplayer、CSSSelector和CSSSelectorAncestor选项也可能是明智的。这些选项允许您更改预定义的css类/选择器/无论您如何调用它。

C#

如果您想使用C#来完成此操作，请执行完全相同的操作。唯一不同的是用HTMLgenericcontrol而不是javascript来呈现HTML.在htmlgenericcontrol的末尾，您可以添加对javascript文件的调用，该文件反过来使用jquery来实例化播放器。请注意，您的唯一ID必须在C#内部创建，并通过javascript调用传递给您的jquery实例化方法。

请注意，您的服务器/下载方法需要支持range请求。否则，播放文件时可能会出现问题。

~

我知道这可能有点令人困惑，但我目前在某些框架和结构中工作，不能真正给出代码，这只会让事情更混乱。所以我希望这对你有用！

请随时询问任何进一步的问题！

Answer 2

我和你有同样的问题。Check this google groups post和this one as well.您将希望从代码中注释掉"ready“事件，并在其他地方执行该逻辑。所以，在你的代码中：

$("#jquery_jplayer_"+i).jPlayer({
        play: function() { // To avoid both jPlayers playing together.
            $(this).jPlayer("pauseOthers");
        },
        repeat: function(event) { // Override the default jPlayer repeat event handler
            if(event.jPlayer.options.loop) {
                $(this).unbind(".jPlayerRepeat").unbind(".jPlayerNext");
                $(this).bind($.jPlayer.event.ended + ".jPlayer.jPlayerRepeat", function() {
                    $(this).jPlayer("play");
                });
            } else {
                $(this).unbind(".jPlayerRepeat").unbind(".jPlayerNext");
                $(this).bind($.jPlayer.event.ended + ".jPlayer.jPlayerNext", function() {
                    $("#jquery_jplayer_"+(i-1)).jPlayer("play", 0);
                });
            }
        },
        swfPath: "jplayer/js",
        supplied: "webmv",
        size: {
            width: "640px",
            height: "360px",
            cssClass: "jp-video-360p"
        },      
        cssSelectorAncestor: "#jp_container_"+i
    });

并在一个单独的函数中执行"setMedia“事件，您将希望从其他地方调用该函数。例如，这里：

<ul class="jp-controls">
                                <li><a href="javascript:;" class="jp-play" tabindex="1" onclick="playMedia(@itemCount)">play</a></li>
                                <li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li>
                                <li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></li>
                                <li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li>
                                <li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li>
                                <li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a></li>
                            </ul>

其中itemCount是在动态生成标记的循环中确定的。然后有一个这样的函数：

function playMedia(itemDivId) {
    var podcastPaths = [@Html.Raw(String.Join(",", itemPodcastPaths.Select(s => "'" + s.Replace("\\", "\\\\") + "'")))];
    var url = getUrl(podcastPaths[itemDivId]);

    var stream = {
        mp3: url
    };
    var selector = "#jquery_jplayer_" + itemDivId;
    $(selector).jPlayer("setMedia", stream);
}

Answer 3

我使用的是相同的环境，5个jplayer在同一个页面中初始化了for( ){}，你需要为每个人实例化一个不同的'i‘副本。这是这样做的

for(var i=0;i<5;i++){

  (function(i){

   $("#jquery_jplayer_"+i).jPlayer({
     ready: function(event){
       $(this).jPlayer("setMedia",myMediaArray);
     },
     error: function (event) {
      console.log(event.jPlayer.error);
     },
     swfPath: "../jquery.jplayer.swf",
     cssSelectorAncestor: '#flash-'+i,
     cssSelector:{
     play: '.icon-play1',
     pause: '.icon-pause1',
     seekBar: '.jp-seek-bar',
     playBar: '.ui-slider-range',
     currentTime: '.jp-current-time',
     duration: '.jp-duration'
     },
     supplied: "mp3",
     solution_play: "flash, html",
     wmode: "window",
     mobile:true,
     preload: "metadata",
     volume: 1,
     duration:true,
     smoothPlayBar: true,
     keyEnabled: true,
     errorAlerts: true
   });

  })(i);

}

如果你不使用

(function(i){
//
})(i);

您将最终将所有玩家初始化为las玩家。