Как разместить jPlayer

Я не могу понять, как разместить jPlayer.Как разместить jPlayer

Я посмотрел документацию jPlayer, в которой говорится, что jPlayer установлен по умолчанию по умолчанию, но, похоже, он не является частью потока страницы, а не из потока, как абсолютно позиционированный элемент.

Кроме того, я попытался применить свойства CSS слева, сверху, снизу и справа к кучу элементов, из которых сделан jPlayer, и ни одна попытка не сделала никаких изменений.

Кроме того, добавление опций в раздел javascript на jPlayer тоже ничего не делает. Я говорю о вариантах, перечисленных здесь: http://www.jplayer.org/0.2.2/developer-guide/. Я пробовал сверху и слева, и они ничего не делали.

источник

2011-12-20 Mark Kramer

У вас есть страница разработки, с помощью которой вы могли бы перейти по ссылке? Это облегчило бы предложить соответствующее исправление. Вы можете позиционировать jPlayer любым способом, как вам нравится, с помощью CSS. И есть ли какая-то причина, связанная с древней версией Документации, выше? – Lloyd

Потому что это единственное, что я смог найти по этому вопросу с помощью поиска в Google. Я посмотрю что я могу сделать. Также вы сказали, что это можно сделать с помощью CSS, но вы не сказали, какой элемент он имеет, что вы должны позиционировать с помощью CSS –

У вас есть полный контроль над HTML-разметкой и стилем CSS вашего экземпляра jPlayer. Пример ниже (see Fiddle here)

С этого стандартного графического интерфейса разметки (взято из демоса 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, как вам угодно. Например, добавив некоторые правила позиционирования

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

источник

2011-12-20 23:28:53 Lloyd

Как разместить jPlayer

ответ

Смежные вопросы