Question

我正在尝试为我的新网站制作音乐播放器（使用video.js）。除了位置滑块外，一切正常。起初它可能看起来没问题，但一旦进度条移动，它就会重叠滑块。让我解释一下我是如何设置的：

使用Bootstrap 3，我有一个底部导航栏，其中包含一个用于video.js的自定义UI。那里有一个进度条来显示已经播放了多少曲目，并且应该有一个不可见的范围滑块来改变顶部曲目的当前位置，但这就是问题出现的地方。

我尝试过将滑块放在任何地方，我尝试使用“position：absolute”，但仍然没有。这是我的代码：（如果你想看到所有的东西，请去here）

HTML：

<div class="navbar navbar-default navbar-fixed-bottom" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <a id="nowplaying_titleartist" class="navbar-brand" style="padding: 15px;">Frenssu - Damare (Baq5 Remix)</a>
        </div>
        <div class="btn-group pull-left">
            <button class="btn btn-primary btn-xs navbar-btn" id="playButton" onclick="player.play();"><span class="glyphicon glyphicon-play" style="color: #fff;"></span></button>
            <button class="btn btn-primary btn-xs navbar-btn" id="pauseButton" onclick="player.pause();"><span class="glyphicon glyphicon-pause" style="color: #fff;"></span></button>
        <button class="btn btn-primary btn-xs navbar-btn" id="stopButton" onclick="player.pause(); player.currentTime(0);"><span class="glyphicon glyphicon-stop" style="color: #fff;"></span></button>
        </div>
        <div class="nav navbar-text progress progress-striped" style="width: 45%; margin: 15px; margin-left: 5px;">
            <div id="seekbar" class="progress-bar progress-bar-info"></div>
            <input id="position" type="range" min="0" max="100" value="0" onchange="updatePosition(this.value);" style="width: 100%; height: 50; opacity: 0.5; height: 100%;" />
        </div>
        <p class="nav navbar-text label label-primary" id="currentTime" style="padding: 6px; margin-top: 15px; margin-left: -15px;">00:00</p>
        <div class="nav navbar-text" style="margin: 0px; padding-top: 15px; margin-left: -10px;">
            <input id="volume" type="range" min="0" max="100" value="100" onchange="updateVolume(this.value);" style="width: 100px; margin: 0px; padding: 0px;" />
        </div>
    </div>
</div>

CSS（范围滑块）：

input[type=range] {
    -webkit-appearance: none;
    background-color: silver;
    width: 200px;
    height: 22px;
    margin: 0px;
    padding: 0px;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    background-color: #666;
    opacity: 0.5;
    width: 10px;
    height: 22px;
    margin: 0px;
    padding: 0px;
}

使用Javascript：

var player = videojs('test');
player.hide();
player.src({ type: "audio/mp3", src: "/mure/uploads/test.mp3" });

function updateVolume(volume){
    var player = videojs('test');
    player.volume(volume / 100);
}

function updatePosition(position){
    var player = videojs('test');
    player.currentTime(position / 100 * player.duration());
}

player.on("timeupdate",function(){
    var player = videojs('test');
    var progressbar = document.getElementById('seekbar');
    progressbar.style.width = (player.currentTime() / player.duration() * 100) + "%";
    var currentTimeLabel = document.getElementById('currentTime');
    currentTimeLabel.innerHTML = intToTime(Math.round(player.currentTime()));

    if (player.currentTime() == 0){
        document.getElementById("pauseButton").className = document.getElementById("pauseButton").className.replace( /(?:^|\s)active(?!\S)/g , '' );
}
});

player.on("play", function(){
    document.getElementById("pauseButton").className = document.getElementById("pauseButton").className.replace( /(?:^|\s)active(?!\S)/g , '' );
    document.getElementById('playButton').className += ' active';
});

player.on("pause", function(){
    document.getElementById("playButton").className = document.getElementById("playButton").className.replace( /(?:^|\s)active(?!\S)/g , '' );
    if (player.currentTime() != 0){
        document.getElementById('pauseButton').className += ' active';
    }
});

function intToTime(integer) {
    var sec_num = parseInt(integer, 10);
    var hours   = Math.floor(sec_num / 3600);
    var minutes = Math.floor((sec_num - (hours * 3600)) / 60);
    var seconds = sec_num - (hours * 3600) - (minutes * 60);
    if (minutes < 10) {minutes = "0"+minutes;}
    if (seconds < 10) {seconds = "0"+seconds;}
    var time    = minutes+':'+seconds;
    return time;
}

Answer 1

您可以尝试通过CSS更改位置。

#position{
    position: relative;
    top: -15px;
}

Answer 2

这就是我为了让它发挥作用而做出的CSS改变，似乎也是如此。

.nav.progress {
  position: relative;
}

#position {
  position: absolute;
  margin-top: -2px;
  left: 0;
}

在Bootstrap进度条上方显示范围滑块（在导航栏中）

2 个答案: