如何定位jPlayer

我似乎無法弄清楚如何定位jPlayer。如何定位jPlayer

我查看了jPlayer的文檔，其中說jPlayer默認設置爲絕對定位，但它似乎並不是因爲它似乎是頁面流的一部分，而不是流出像流絕對定位的元素是。

另外，我嘗試將左，上，下和右CSS屬性應用於jPlayer所製作的一組元素，而不是一次嘗試進行任何更改。

此外，將選項添加到jPlayer的javascript部分似乎也沒有做任何事情。我正在討論這裏列出的選項：http://www.jplayer.org/0.2.2/developer-guide/。我試了一下，然後他們什麼都沒做。

來源

2011-12-20 Mark Kramer

您是否有可以鏈接到的開發頁面？這將使建議相關修復更容易。你可以用CSS來定位jPlayer。是否有任何理由與上面的文檔的古代版本相關聯？ – Lloyd 2011-12-20 18:40:58

因爲是我可以通過谷歌搜索在主題上找到的唯一東西。我會看看我能做什麼。你也說過可以用CSS來完成，但是你沒有說出你必須用CSS定位哪個元素 – 2011-12-20 22:43:10

您可以完全控制jPlayer實例的HTML標記和CSS外觀/感覺。下面（see Fiddle here）

利用這種標準的GUI標記（來自jPlayer演示截取）

<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>

可以實例化一個玩家與該JavaScript示例

$(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" 
      }); 
     } 
    });   
});

這使得在平原，無樣式HTML你的瀏覽器。您可以根據自己的喜好設計jPlayer GUI的樣式。例如，通過添加一些定位規則

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

來源

2011-12-20 23:28:53 Lloyd

如何定位jPlayer

回答

相關問題