如何定位jPlayer

Question

我似乎想不出如何定位jPlayer。

我看过jPlayer的文档，它说jPlayer默认情况下被设置为绝对定位，但它似乎不是，因为它似乎是页面流的一部分，而不是像绝对定位元素那样在流之外。

此外，我还尝试将left、top、bottom和right CSS属性应用于一组组成jPlayer的元素，但没有一次尝试做任何更改。

此外，将选项添加到jPlayer上的javascript部分似乎也没有任何作用。我说的是这里列出的选项：http://www.jplayer.org/0.2.2/developer-guide/。我从上到左试了试，他们什么也没做。

Answer 1

将其放在主div或第一个div标记中。然后，一旦你完成了它，你可以编辑你想要的职位：

style="position: absolute;left: 100px;top: 40px;"

Answer 2

您可以完全控制jPlayer实例的HTML标记和CSS外观。下面的示例(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
}