Как позиционировать jPlayer - PullRequest
Новая
       1

Как позиционировать jPlayer

1 голос
/ 20 декабря 2011

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

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

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

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

Ответы [ 2 ]

1 голос
/ 23 апреля 2018

Поместите это в основной div или первый div тег.Затем, как только вы закончите с этим, вы можете отредактировать позицию по своему желанию: 

style="position: absolute;left: 100px;top: 40px;"
0 голосов
/ 21 декабря 2011

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

С этой стандартной разметкой 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
}
...