javascript - 输入类型范围 slider 拇指在 Google Chrome 中不可移动

Question

我正在开发一个视频网络播放器，我一直在 Chrome (版本 63.0.3239.108(官方构建)(64 位)) 和 Firefox( 52.5.2(64 位))。在 Chrome 中，每当我移动用于搜索视频的 slider 时，它只会跳回到当前视频播放时间，而不是用户希望播放视频的时间。

这是处理这部分的函数:

function vidSeek(){
    var seekto = vid.duration * (seekbar.value / 100);
    vid.currentTime = seekto;
}

这在 Firefox 中按预期工作(但是在 Firefox 内部有一个问题，似乎是默认样式覆盖了我正在写的样式，但我认为这与它没有任何关系)

这是包含 slider 的控制栏的 html:

<div id="playercontrolls">
    <button id="playpausebtn">Pause</button>
    <input id="seekslider" type="range" min="0" max="100" value="0" step="1"> <!-- Seek bar doesn't work-->
    <span id="curtimetext" class="white-text"></span> / <span id="durtimetext" class="white-text"></span>
    <button id="mutebtn">Mute</button>
    <input id="volumeslider" type="range" min="0" max="100" value="100" step="1"> <!-- Volume bar works-->
    <button id="fullscreenbtn">[]</button>
</div>

我还制作了一个音量 slider ，它似乎在 Firefox 和 Chrome 中都有效(除了 Firefox 中的静止问题)

代码是:

function setvolume(){
    if(vid.muted && volumeslider.value != 0){
        vid.muted = false;
        mutebtn.innerHTML = "Mute";
    }
    vid.volume = volumeslider.value / 100;
}

我还以编程方式更改搜索栏的值，使其跟随视频时间，如下所示:

function seekTimeUpdate(){
    var nt = vid.currentTime * (100 / vid.duration);
    seekbar.value = nt;

    // update time text
    updateTime();
}

function updateTime(){
    var curmins = Math.floor(vid.currentTime / 60);
    var cursecs = Math.round(vid.currentTime - curmins * 60);
    var durmins = Math.floor(vid.duration / 60);
    var dursecs = Math.round(vid.duration - durmins * 60);

    if(cursecs < 10){ cursecs = "0"+cursecs;}
    if(dursecs < 10){ dursecs = "0"+dursecs;}
    if(durmins > 10)
        if(curmins < 10){ curmins = "0"+curmins;}

    curtimetext.innerHTML = curmins+":"+cursecs;
    durtimetext.innerHTML = durmins+":"+dursecs;
}

这同样适用于 Firefox 和 Chrome。

slider 的 CSS:

input#seekslider {
    width: 90vh;
}

input#volumeslider {
    width: 20vh;
}

input[type='range'] {
    -webkit-appearance: none !important;
    background: #000;
    border: #666 1px solid;
    height: 6px;
}

input[type='range']::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    background: #FFF;
    height: 15px;
    width: 15px;
    border-radius: 75%;
    cursor:pointer;
}

input[type=range]:focus {
    outline: none;
}

input[type=range]:focus::-webkit-slider-runnable-track {
    background: #ccc;
}

这可能是什么问题？样式与它的行为有什么关系吗？

编辑:这里是播放器的完整 javascript 代码:https://pastebin.com/rM54vqqf

这也是我的页面播放器部分的 HTML:

<div id="playerContainer" class="container z-depth-1">
            <div class="d-flex justify-content-center">
                <video id="vid" autoplay>
                    <source src= "{% static '/TestVideos/'%}{{path}}" type="video/mp4"></source>
                </video>
            </div>
            <div id="playercontrolls">
                <button id="playpausebtn" class="nokit"><i class="fa fa-pause white-text" aria-hidden="true"></i></button>
                <span class="slider"><input id="seekslider" type="range" min="0" max="100" value="0" step="0.1">    </span>
                <span id="curtimetext" class="white-text"></span> / <span id="durtimetext" class="white-text"></span>
                <button id="mutebtn" class="nokit"><i class="fa fa-volume-up white-text" aria-hidden="true"></i></button>
                <span class="slider"><input id="volumeslider" type="range" min="0" max="100" value="100" step="1"></span>
                <button id="fullscreenbtn" class="nokit"><i class="fa fa-desktop white-text" aria-hidden="true"></i> </button>
            </div>
        </div> 

我注意到的是，每当我全屏播放它时，标准控件的行为方式与我的自定义控件相同(同样仅在 chrome 中)我试图通过以下方式摆脱这些自定义控件:

::-webkit-media-controls {
  display:none !important;
}

::-webkit-media-controls-enclosure {
  display:none !important;
}

但这在全屏模式下似乎不起作用。由于某种原因不允许我的 javascript 正常工作的 CSS 是否存在问题？在那种情况下，这是我的播放器 CSS:https://pastebin.com/FzFjMUPH

Answer 1

我似乎明白了(你的 jsfiddle 帮了大忙)。当用户捕获 slider 和视频本身根据设置的事件自动移动它时会发生冲突。

因此，我尝试使用一些附加条件来阻止用户操作 slider 时自动中断。

添加了另外两个变量(var cursorCaught, onSeeking;，最后一个在 function vidSeek() 中设置)以及另外两个鼠标事件(function catchCursor() for mousedown 和 function freeCursor() for mouseup) for seekslider to设置变量。最后，还有一个新条件需要在执行操作之前检查 function seekTimeUpdate():if (!cursorCaught || onSeeking) { ... }。

看看这个 jsfiddle:https://jsfiddle.net/1y86r593/2/

也许，由于这些新条件可能会产生一些副作用，但思路应该很清晰。