입력 유형 범위 슬라이더 썸을 Google 크롬에서 움직일 수 없음

Question

나는 비디오 용 웹 플레이어로 작업 중이며 Chrome (Version 63.0.3239.108 (Official Build) (64-bit))과 Firefox (52.5.2 (64-bit))에서 테스트 해 보았습니다. 크롬에서 비디오를 검색하기 위해 슬라이더를 움직일 때마다 비디오 재생을 원하는 시간 대신 현재 비디오 재생 시간으로 바로 돌아갑니다. 그러나 파이어 폭스 내부 (파이어 폭스에서 거기 내가 쓰고 있어요 하나를 오버레이 기본 스타일로 보이는 stiling 문제가 예상대로이 작동하고

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

:

다음은이 부분을 처리하는 기능입니다 나는 또한했습니다

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

:하지만 난 여기에

이 슬라이더를 포함하는 설정 제어 막대의 HTML이다) 그것과 아무 상관이 있다고 생각하지 않습니다 보이는 볼륨 슬라이더가

그의 코드 (파이어 폭스에서 stiling 문제 제외) 파이어 폭스와 크롬 모두에서 작동하는 것은 :

또한

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

나는 programmaticly 시크의 값을 변경하고있어 따라서 다음과 같은 동영상 시간을 따르십시오.

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

여기에 문제가 무엇인지? 스타일링이 그 행동과 관련이 있습니까?

편집 : 여기의 요청에 따라 플레이어의 전체 자바 스크립트 코드입니다 : 내가 눈치 챘을

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

뭔가 : 또한 여기 https://pastebin.com/rM54vqqf

페이지의 선수 부분에 대한 내 HTML입니다 내가 전체 화면으로 재생할 때마다 표준 컨트롤이 내 사용자 정의 컨트롤 (크롬에서만 사용 가능)과 동일한 방식으로 작동한다는 것을 알았습니다. 다음을 수행하여 해당 컨트롤을 제거하려고했습니다.

하지만 전체 화면에서는 작동하지 않는 것 같습니다. 어떤 이유로 든 내 자바 스크립트가 제대로 작동하지 못하게하는 CSS 문제를 일으킬 수 있습니까? 이 경우 여기에 플레이어에 대한 내 CSS는 다음과 같습니다 https://pastebin.com/FzFjMUPH

Answer 1

내가 보인다는 (당신의 jsfiddle이 많은 도움)을 가지고있다. 사용자가 슬라이더를 잡으면 비디오가 자동으로 이벤트 세트에 따라 움직입니다.

그래서 사용자가 슬라이더를 조작 할 때 자동 중단을 막기 위해 몇 가지 추가 조건을 사용하려고했습니다.

두 개 변수는 변수를 설정하는 seekslider에 대한 두 개 더 마우스 이벤트 (mouseup에 대한 mousedown에 대한 function catchCursor() 및 function freeCursor())와 함께 (var cursorCaught, onSeeking;가, 마지막 하나는 function vidSeek()에서 설정)이 추가되었습니다. 마지막으로, 조치를 취하기 전에 을 체크인하는 새로운 조건이 있습니다 : if (!cursorCaught || onSeeking) { ... }.

이 jsfiddle 살펴 유무 : https://jsfiddle.net/1y86r593/2/ 아마도

때문에 이러한 새로운 조건의 일부 부작용이있을 수 있습니다,하지만 아이디어는 명확해야한다.

Answer 2

당신은 그것을 -THE 쉽게 해결할 수 있습니다 -

바꿉니다!

seekbar.addEventListener ("변경", vidSeek, 거짓을); 함께

:

seekbar.addEventListener ("입력"vidSeek 거짓);

나는 그것이 작동되기를 바랍니다! 행운을 빕니다!

편집 : 제안 된 해결책은 효과가 없었지만 결코 포기하지 마십시오!

환경에 시도하십시오 (이전의 교체를 취소) 및 복원 :

1) 자바 스크립트

var userIsUpdatingTime = false; 

2 위에 새로운 VAR 추가) 새로운 VAR는 사용자 알고합시다을 SeekBar를

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