jPlayerの配置方法

Question

jPlayerの配置方法がわかりません。

jPlayerがデフォルトで絶対配置されるように設定されているjPlayerのドキュメントを見ましたが、ページのフローの一部であるように見えるので表示されません。絶対配置要素はです。

また、左、上、下、右のCSSプロパティを、jPlayerが構成されている一束の要素に適用してみました。

また、jPlayerのjavascriptセクションにオプションを追加しても、何もしないようです。私はここに記載されているオプションについて話しています：http://www.jplayer.org/0.2.2/developer-guide/。私は上と左を試み、彼らは何もしなかった。

Answer 1

jPlayerインスタンスのHTMLマークアップとCSSのルック＆フィールを完全に制御できます。あなたはこのJavaScriptでプレーヤーをインスタンス化することができます

<div id="player"></div> 
<div id="jp_container_1" class="jp-audio"> 
    <div class="jp-type-single"> 
     <div class="jp-gui jp-interface"> 
      <ul class="jp-controls"> 
       <li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li> 
       <li><a href="javascript:;" class="jp-pause" tabindex="1" style="display: none; ">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" style="display: none; ">unmute</a></li> 
       <li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a></li> 
      </ul> 
      <div class="jp-progress"> 
       <div class="jp-seek-bar"> 
        <div class="jp-play-bar"></div> 

       </div> 
      </div> 
      <div class="jp-volume-bar"> 
       <div class="jp-volume-bar-value"></div> 
      </div> 
      <div class="jp-current-time"></div> 
      <div class="jp-duration"></div> 
      <ul class="jp-toggles"> 
       <li><a href="javascript:;" class="jp-repeat" tabindex="1" title="repeat">repeat</a></li> 
       <li><a href="javascript:;" class="jp-repeat-off" tabindex="1" title="repeat off" style="display: none; ">repeat off</a></li> 
      </ul> 
     </div> 
     <div class="jp-title"> 
      <ul> 
       <li></li> 
      </ul> 
     </div> 
     <div class="jp-no-solution" style="display: none; "> 
      <span>Update Required</span> 
      To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>. 
     </div> 
    </div> 
</div> 

（jPlayerのデモから取られた）この標準GUIのマークアップ（see Fiddle here）

以下の実施例は

$(function() { 
    $("#player").jPlayer({ 
     swfPath: "http://www.jplayer.org/latest/js/Jplayer.swf", 
     supplied: "mp3", 
     ready: function() { 
      $(this).jPlayer("setMedia", { 
       mp3:"http://static1.grsites.com/archive/sounds/animals/animals001.mp3" 
      }); 
     } 
    });   
}); 

これは、プレーン、unstyled HTMLをレンダリングあなたのブラウザ。 jPlayer GUIを好みのようにスタイルすることができます。たとえば、いくつかの位置決めルールを追加することで、

.jp-play, .jp-pause { 
    position:absolute; 
    left: 7em; 
    top: 3em 
}