输入类型范围滑块拇指在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()的mousedown和function freeCursor()的mouseup）为seekslider设置变量。最后，在采取行动之前还有一个新的条件来检查function seekTimeUpdate()：if (!cursorCaught || onSeeking) { ... }。

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

也许，由于这些新的条件，可能会有一些副作用，但这个想法应该是清楚的。

Answer 2

你可以解决它 - 简单的方法！ -

更换：

seekbar.addEventListener（“change”，vidSeek，false）;

有：

seekbar.addEventListener（“input”，vidSeek，false）;

我希望它有效！祝好运！

编辑：建议的解决方案不适合你，但永远不要放弃！

恢复您的环境（撤消之前的替换），然后尝试：

1）在你的javascript上添加一个新的var

var userIsUpdatingTime = false;

2）让新var知道用户是否正在与搜索栏进行交互

   seekbar.addEventListener("input",
    function () {
        userIsUpdatingTime = true;
    }
    ,false);

3）让你的seekTimeUpdate知道新的var

    function seekTimeUpdate(){
        if (userIsUpdatingTime)
            return;

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

        // update time text
        updateTime();
    }

4）更新完成后更新var！

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

5）如果此解决方案有效，请告诉我！

示例粘贴：https://pastebin.com/rF7F7k23