Сброс пользовательской видеопрограммы при нажатии

Question

Работа с встраиваемыми видеороликами YouTube и создание внешнего индикатора выполнения.

Первая проблема, с которой я сталкиваюсь, заключается в том, что я могу искать только назад (как в, единственный раз, когда настройка строки поиска настраивается, когда я нажимаю на часть индикатора выполнения, которая уже произошла. Я считаю, что это связано с тем, div Я использую).

Во-вторых, когда я нажимаю, чтобы искать назад во времени, видео просто сбрасывается. Если значение, которое оно получает, равно «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" 
    }); 
} 

Edit: здесь живой сайт! https://www.uncvrd.co/

Answer 1

Все, что вам нужно сделать, это переустановить элемент html, чтобы на нем было событие onclick. В настоящее время onclick находится на движущемся 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 попытки получить значение DIV (но дивы не имеют значения). То, что вы хотите использовать, - 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); 
    });