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和{{1} } {} function freeCursor()）mouseup设置变量。最后，在执行操作之前还需要检查seekslider的新条件：function seekTimeUpdate()。

看看这个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

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

2 个答案: