1

以下は、jQuery を使用した jPlayer のコードです。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

たぶん、これはあなたにどこから始めるべきかについてのいくつかの方向性を与えるかもしれません：

JS

これを試してください：次のようにjplayerを作成するjavascriptファイルを作成します。this.html = Ext.String.format（YourHtmlCodeForJplayer）;でhtmlを定義しています。

最後に、jqueryを呼び出してインスタンス化できます。これには、次を使用します。on（afterrender、function（）{YourJqueryCodeHereThatCallsTheJplayerLibrary}）

プレイヤーごとに一意のIDを使用することを忘れないでください。（コンポーネント、コンテナ、インターフェイスIDがあります）オーディオファイルが再生されないという問題もありますが、それは単に使用しているリソースサービスである可能性があります。通常のmp4ファイルでは、それほど問題はありません。

jqueryをインスタンス化するときにjplayerCSSSelectorおよびCSSSelectorAncestorオプションを試して使用することも賢明かもしれません。これらのオプションを使用すると、事前定義されたcssクラス/セレクター/何と呼んでも変更できます。

C＃

これを行うためにC＃を使用する場合は、まったく同じことを行います。唯一の違いは、javascriptの代わりにHTMLgenericcontrolを使用してHTMLをレンダリングすることです。htmlgenericcontrolの最後に、javascriptファイルへの呼び出しを追加できます。このファイルは、jqueryを使用してプレーヤーをインスタンス化します。一意のIDはC＃内で作成し、javascript呼び出しでjqueryインスタンス化メソッドに渡す必要があることに注意してください。

サーバー/ダウンロード方法は範囲要求をサポートする必要があることに注意してください。そうしないと、ファイルの再生に問題が発生する可能性があります。

〜

これは少し紛らわしいかもしれませんが、現在、特定のフレームワークと構造内で作業していて、実際にはコードを提供できないため、さらに混乱するだけです。とにかくこれがあなたに役立つことを願っています！

ご不明な点がございましたら、お気軽にお問い合わせください。

于 2013-01-08T10:53:00.923 に答える
0

私は同じ環境を使用しており、for( ){} で初期化された同じページ内の 5 つの jplayers それぞれに対して「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);

最終的に、すべてのプレーヤーが最後のプレーヤーとして初期化されます。

于 2014-12-19T23:38:12.263 に答える
0

私はあなたと同じ問題を抱えていました。この Google グループの投稿と、これも確認してください。コードから「準備完了」イベントをコメントアウトし、そのロジックを別の場所で実行する必要があります。だから、あなたのコードで：

$("#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 に答える