1

下面是 jPlayer 与 jQuery 的代码。我必须动态创建 jPlayer。

$("#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() 但没有用。

4

3 回答 3

0

我和你有同样的问题。检查这个谷歌群组帖子，以及这个。您将要从代码中注释掉“就绪”事件，并在其他地方执行该逻辑。因此，在您的代码中：

$("#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);
}
于 2013-04-17T11:42:24.387 回答
0

我使用相同的环境，同一页面中的 5 个 jplayers 在 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 玩家。

于 2014-12-19T23:38:12.263 回答
0

也许这可能会给你一些从哪里开始的方向：

JS

试试这个：创建一个创建 jplayer 的 javascript 文件，如下所示。我用 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 实例化方法。

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

~

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

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

于 2013-01-08T10:53:00.923 回答