输入类型范围滑块拇指在Google Chrome中无法移动

Question

我正在开发一个视频网络播放器,我一直在Chrome (Version 63.0.3239.108 (Official Build) (64-bit))和Firefox上测试它(52.5.2 (64-bit)).在Chrome中,只要我移动滑块以便通过视频进行搜索,它就会跳回当前的视频播放时间,而不是用户想要播放视频的时间.

以下是处理此部分的函数:

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

这在Firefox中正如预期的那样工作(但是在firefox中有一个问题,似乎是默认样式覆盖了我正在写的那个,但我认为它与它无关)

这是包含滑块的控制栏的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>

我还制作了一个音量滑块,似乎在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中都能很好地工作.

滑块的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 帮了很大忙）。当用户抓住滑块并且视频本身根据设置的事件自动移动滑块时，会发生冲突。

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

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

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

也许，由于这些新条件可能会产生一些副作用，但这个想法应该是明确的。