Kciuk suwaka zakresu danych nie może być przenoszony w przeglądarce Google Chrome

Question

Pracuję nad odtwarzaczem wideo wideo i testowałem go w Chrome (Version 63.0.3239.108 (Official Build) (64-bit)) i Firefox (52.5.2 (64-bit)). W przeglądarce Chrome za każdym razem, gdy przesuwam suwak w celu przeszukiwania filmu, po prostu przeskakuje z powrotem do bieżącego czasu odtwarzania wideo, zamiast czasu, w którym użytkownik chce odtworzyć wideo.

Oto funkcja przenoszenia tej części:

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

To działa zgodnie z oczekiwaniami w Firefoksie (jednak wewnątrz firefox jest stiling problem gdy Ther wydaje się być domyślne stylizacji nałożenie jednego piszę, ale nie sądzę, że nie ma nic wspólnego z nim)

Oto html na pasku Controll zawierającej suwaki:

<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> 

ja również suwak głośności, który wydaje się działać zarówno w Firefox i Chrome (z wyjątkiem stiling problemu w Firefoksie)

kodu za to jest:

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

Również jestem programmaticly zmieniając wartość seek pasek, więc następuje następujący czas wideo:

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; 
} 

Znowu to działa dobrze zarówno w Firefoksie, jak i w Chrome.

CSS dla suwaków:

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; 
} 

Co może być problemem? Czy styl ma coś wspólnego z jego zachowaniem?

EDIT: Oto pełny kod JavaScript do odtwarzacza zgodnie z żądaniem: https://pastebin.com/rM54vqqf

Również tutaj jest mój HTML dla części odtwarzacza strony:

<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> 

Coś Zauważyłem jest to, że gdy gram na pełnym ekranie, standardowe kontrolki działają w taki sam sposób, jak moje niestandardowe formanty (ponownie tylko w chrome) Próbowałem pozbyć się tych niestandardowych kontrolek, wykonując:

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

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

ale to nie działa na pełnym ekranie. Czy może istnieć problem z regułą CSS, który z jakiegoś powodu nie pozwala na poprawne działanie mojego javascript? W takim razie tutaj jest mój CSS dla gracza: https://pastebin.com/FzFjMUPH

Answer 1

I wydaje się, że dostał go (Twój jsfiddle pomógł dużo). Podczas przechwytywania suwaka dochodzi do konfliktu, a sam plik wideo jest automatycznie przenoszony zgodnie z ustawionymi zdarzeniami.

Próbowałem więc skorzystać z dodatkowych warunków, aby zatrzymać automatyczne przerwy za pomocą suwaka, gdy użytkownik go obsługuje.

Dwa bardziej zmienne zostały dodane (var cursorCaught, onSeeking;, ostatni jest ustawiony w function vidSeek()) wraz z dwoma więcej zdarzeń myszy (function catchCursor() dla mousedown i function freeCursor() dla mouseup) dla seekslider ustawić zmienne. Wreszcie, przed wykonaniem czynności należy sprawdzić nowy stan:.

Zapraszamy do obejrzenia tej jsfiddle: https://jsfiddle.net/1y86r593/2/

Być może, nie mogą być pewne skutki uboczne z powodu tych nowych warunkach, ale idea powinny być jasne.

Answer 2

Można go naprawić -The łatwy sposób -

wymienić:

seekbar.addEventListener ("zmiana", vidSeek, false);

z:

seekbar.addEventListener ("wejście", vidSeek FAŁSZ);

Mam nadzieję, że to działa! Powodzenia!

EDYTOWANIE: Proponowane rozwiązanie nie działa, ale nigdy się nie poddawaj!

Przywracanie środowiska (aś poprzedniej wymiany), a następnie spróbuj:

1) dodaj nową var na górze javascript

var userIsUpdatingTime = false; 

2) Niech nowy var wiedzieć, czy użytkownik jest interakcja z SeekBar

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

3) Niech Twój seekTimeUpdate wiedzieć o nowym var

function seekTimeUpdate(){ 
     if (userIsUpdatingTime) 
      return; 

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

     // update time text 
     updateTime(); 
    } 

4) Po aktualizacji zaktualizuj var!

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

5) Daj mi znać, jeśli to rozwiązanie działa!

Przykład pasta: https://pastebin.com/rF7F7k23