jPlayer를 배치하는 방법

Question

jPlayer를 배치하는 방법을 생각할 수 없습니다.

jPlayer가 기본적으로 절대 위치로 설정되어 있지만 페이지의 흐름에 속한 것 같아 보이지 않는 것처럼 보이는 jPlayer의 설명서를 보았습니다. 절대적으로 배치 된 요소가 있습니다.

또한 왼쪽, 위쪽, 아래쪽 및 오른쪽 CSS 속성을 jPlayer가 구성되고 한 번의 시도가 변경되지 않은 일련의 요소에 적용 해 보았습니다.

또한 jPlayer의 javascript 섹션에 옵션을 추가해도 아무 것도하지 않는 것 같습니다. 여기에 나열된 옵션에 대해 이야기하고 있습니다 : http://www.jplayer.org/0.2.2/developer-guide/. 나는 위쪽과 왼쪽을 시도하고 그들은 아무것도하지 않았다.

Answer 1

jPlayer 인스턴스의 HTML 마크 업과 CSS 모양/느낌을 완벽하게 제어 할 수 있습니다. 이 자바 스크립트와 플레이어를 인스턴스화 할 수

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

이에 일반, 스타일이 적용되지 않은 HTML을 렌더링 귀하의 브라우저. 원하는대로 jPlayer GUI의 스타일을 지정할 수 있습니다. 예를 들어 일부 위치 지정 규칙을 추가하여

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