如何創建動態jPlayer？

下面是帶jQuery的jPlayer的代碼。我必須創建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（）但不起作用。

來源

2012-06-15 Ankit Shah

也許這可能會給你在哪裏開始一些方向：

試試這個：創建創建jplayer如下JavaScript文件。我使用this.html = Ext.String.format（YourHtmlCodeForJplayer）定義html;

在最後你可以調用jQuery來實例化，對於其使用即時通訊：在（AfterRender階段，函數（）{} YourJqueryCodeHereThatCallsTheJplayerLibrary）

不要忘記使用唯一的ID對每個球員。（我有一個組件，容器和接口ID）audiofiles也有問題，但這可能只是我使用的資源服務。與普通的mp4文件不存在很多問題。

在實例化jquery時嘗試並使用jplayer CSSSelector和CSSSelectorAncestor選項也可能很明智。這些選項允許你改變預定義的CSS類/選擇器/無論你怎麼稱呼它。

C＃

如果你想用C＃這樣做，這樣做完全一樣的。唯一不同的是使用HTMLgenericcontrol而不是javascript呈現HTML。在你的htmlgenericcontrol結尾處，你可以添加一個對JavaScript文件的調用，然後使用jquery實例化這些播放器。請注意，您的唯一ID必須在C＃中創建，並通過javascript調用傳遞給您的jquery實例化方法。

請注意，您的服務器/下載方法需要支持範圍請求。否則，播放文件可能會出現問題。

〜

我理解這可能是一個有點混亂，但即時通訊目前某些框架和結構的容器內工作，並不能真正給了代碼，這隻會混淆的東西更多。所以我希望這對你有用！

隨時問任何進一步的問題！

來源

2013-01-08 10:53:00 WhoKnows

我和你有同樣的問題。 Check this google groups post和this one as well。您將要從代碼中註釋掉「準備就緒」事件，並在其他地方執行該邏輯。所以，在你的代碼：

$("#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-17 11:42:24 JPThorne

我現在用的是同樣的環境，5個jplayers在同一頁面initializeds在for（）{} 您需要實例的diferent副本「我」爲每一個。這是這樣

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-19 23:38:12 UrielUVD

如何創建動態jPlayer？

回答

相關問題