如何定位 jPlayer

Question

我似乎不知道如何定位 jPlayer。

我查看了 jPlayer 的文档，其中说 jPlayer 默认设置为绝对定位，但似乎并非如此，因为它似乎是页面流程的一部分，而不是像绝对定位元素那样脱离流程。

另外，我尝试将 left、top、bottom 和 right CSS 属性应用到 jPlayer 组成的一堆元素，但没有一次尝试进行任何更改。

另外，将选项添加到 jPlayer 上的 javascript 部分似乎也没有执行任何操作。我正在谈论此处列出的选项： http://www.jplayer.org/ 0.2.2/开发人员指南/。我尝试了顶部和左侧，但他们什么也没做。

Answer 1

将其放在主 div 或第一个 div 标记中。然后，完成后，您可以根据需要编辑位置：

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

Answer 2

您可以完全控制 jPlayer 实例的 HTML 标记和 CSS 外观/感觉。下面的示例（请参阅此处的 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
}