Question

我似乎无法弄清楚如何定位jPlayer。

我查看了jPlayer的文档，其中说默认情况下jPlayer设置为绝对定位，但它似乎并不是因为它似乎是页面流的一部分，而不是绝对的流程定位元素是。

此外，我尝试将左，上，下和右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）

使用此标准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
}

如何定位jPlayer

2 个答案: