Google Chromeで入力タイプの範囲スライダが動かない

Question

私はビデオ用のウェブプレーヤーで作業しています。私はChrome (Version 63.0.3239.108 (Official Build) (64-bit))とFirefox (52.5.2 (64-bit))でテストしています。クロムでは、ビデオを検索するためにスライダを動かすたびに、ビデオを再生したいと思う時間ではなく、現在のビデオ再生時間にジャンプします。ここで

は、この部分を扱う関数である：

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

これは（Firefoxで正常に機能しているがFirefoxの内部でTHERは私が書いているものを重ねるデフォルトのスタイリングのようですstiling問題があり、私も作った

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

：私はそれがここ

はスライダーを含むcontrollバーのhtmlです）、それを行うには何も持っているとは思いません（Firefoxでstiling問題を除く）のFirefoxとChromeの両方で動作しているようだボリュームスライダー

そのためのコードは次のとおりです。

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

ここに問題がある可能性がありますか？スタイリングはその動作と関係がありますか？

EDIT：ここで要求されるようにプレーヤーのための完全な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> 

私が気づいた何か私がフルスクリーンで再生するたびに、標準コントロールは私のカスタムコントロールと同じように動作します（クロムのみ）。私はこれらのカスタムコントロールを取り除こうとしました：

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

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

しかし、これはフルスクリーンでは機能しないようです。何らかの理由で私のJavaScriptが正しく動作することを許可していないというCSSを嫌う問題がありますか？その場合は、ここでプレーヤーのための私のCSSです：https://pastebin.com/FzFjMUPH

Answer 1

私は（あなたのjsfiddleは多くのことを助けた）、それを持っているように見えます。ユーザーがスライダーをつかんでいるときに、ビデオが自動的にイベントセットに応じて自動的に移動しているときに競合が発生します。

私はスライダーの自動中断をユーザーが操作しているときに停止するために、いくつかの追加条件を使用して試しました。

つ以上の変数を変数を設定するseeksliderための2つのマウスイベント（mousedownとmouseupためfunction freeCursor()用function catchCursor()）と共に（var cursorCaught, onSeeking;、最後の一つはfunction vidSeek()に設定されている）が追加されています。最後に、アクションを行う前にfunction seekTimeUpdate()をチェックする新しい条件もあります：if (!cursorCaught || onSeeking) { ... }。

このjsfiddleを見ている： https://jsfiddle.net/1y86r593/2/おそらく

、なぜならこれらの新しい条件のいくつかの副作用があるかもしれませんが、しかし、アイデアは明らかです。

Answer 2

あなたはそれを-the簡単な方法を修正することができます -

置き換えます！

seekbar.addEventListener（ "変更"、vidSeek、偽の）;

有する：（偽 "入力"、vidSeek）

seekbar.addEventListener。

うまくいきたいですね！がんばろう！

編集： 提案された解決策はあなたのためには機能しませんでしたが、決してあきらめないでください！

は

は、ご使用の環境を復元します（以前の交換を元に戻す）し、その後に試してみてください。

1）

var userIsUpdatingTime = false; 

2あなたのjavascriptの上に新しいVARを追加）をユーザーならば、新たな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