クリックするとカスタムビデオプログレスバーがリセットされます

Question

YouTubeの埋め込み可能なビデオを操作し、外部プログレスバーを作成します。

私が最初に出くわすのは、後ろ向きにしか探索できないということです（シークバーが調整する唯一の時間は、すでに発生したプログレスバーの一部をクリックすることです）。 div私は使用しています）。

第2に、クリックして時間を追うと、ビデオが単にリセットされます。受信する値が「nullまたは0」であるとします。

関連するHTML

<section id="progress-bar-container"> 
    <div class="container-fluid"> 
     <div class="progress-bar-bottom" id="progress-bar-bottom"></div> 
     <div class="progress-background"></div> 
    </div> 
</section> 

関連JS/jQueryの（ただし、あなたが何かを見るために必要がある場合は私に知らせて）

var onPlayerReady = function (event) { 
    console.log("onPlayerReady"); 

    time_total = convert_to_mins_and_secs(player.getDuration(), 1); 

    jQuery(".progress-bar-bottom").on("mouseup touchend", function (event) { 
    // Calculate new time for the video 
    // duration * (value of range input/100) 
    var newTime = player.getDuration() * (event.target.value/100); 
     console.log(newTime); 

    // Skip video to new time. 
    player.seekTo(newTime); 
    }); 

    $musicBar.css({ 
    marginBottom: 0, 
    transition: "all 200ms ease-in-out" 
    }); 
} 

編集：ここでライブサイトです！ https://www.uncvrd.co/

Answer 1

あなたがしなければならないことは、onclickイベントがそれになるようにhtml要素を並べ替えることだけです。現在、onclickは移動div（遷移中のdiv）にあります。のは、これが新しい配置のdivの値を取得する（しかし、div要素が値を持っていない）

<section id="progress-bar-container"> 
    <div class="container-fluid"> 
     <div class="seek-bar"></div> 
     <div class="progress-bar-bottom" id="progress-bar-bottom"></div> 
     <div class="progress-background"></div> 
    </div> 
</section> 

event.target.valueの試みであると仮定しましょう。あなたが使用したいのはevent.pageXなので、x座標を取得してシークバーdivに相対的な位置の割合を見つけることができます。

javascriptの部分は、この

jQuery(".seek-bar").on("mouseup touchend", function (event) { 
    // Calculate new time for the video 
    // duration * (value of range input/100) 
    var newTime = player.getDuration() * (event.pageX/$('.seek-bar').width()); 
     console.log(newTime); 

    // Skip video to new time. 
    player.seekTo(newTime); 
    });