Почему у меня не работают правильно кнопки запуска времени?

Question

Я использую mediaelementplayer

Мой код (почему он здесь не работает)

(function() {

  'use strict';

  let media;
  let mediaBtn = document.querySelectorAll(".button-play");
  let mediaBtnPause = document.querySelectorAll(".button-pause");
  let mediaTime;
  let mediaTimeParts;
  let mediaTimeSeconds;

  $("iframe").mediaelementplayer({
    success: function(mediaElement, domObject) {
      media = mediaElement;
    }
  });

  for (let i = 0; i < mediaBtn.length; i++) {

    let mediaBtns = mediaBtn[i];

    mediaTime = mediaBtns.innerHTML;

    mediaTimeParts = mediaTime.split(':');

    mediaTimeSeconds = (+mediaTimeParts[0]) * 60 * 60 + (+mediaTimeParts[1]) * 60 + (+mediaTimeParts[2]);

    //console.log(i + ' ' + mediaTimeSeconds);

    mediaBtns.addEventListener('click', function() {
      media.setCurrentTime(mediaTimeSeconds);
      media.play();

      console.log('Click button # ' + i);
    });

  }


})();

button {
  cursor: pointer;
  margin: 10px;
  padding: 5px 15px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mediaelement/4.2.9/mediaelement-and-player.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mediaelement/4.2.9/mediaelementplayer.min.css">

<!-- video 1 -->
<div class="media-wrapper">
  <iframe class="video" width="560" height="315" src="https://www.youtube.com/embed/HIbAz29L-FA?modestbranding=1&playsinline=0&showinfo=0&enablejsapi=1&origin=https%3A%2F%2Fintercoin.org&widgetid=1" frameborder="0" allowfullscreen></iframe>

  <button class="button-play">00:00:10</button>
  <button class="button-play">00:00:20</button>
  <button class="button-pause">pause</button>
</div>
<!-- video 1 -->

Пример скрипка

теперь получается при нажатии на любую кнопку (кроме паузы) - запуск начинается со значения последней кнопки.В данном примере от 20 секунд.

Например, при нажатии на кнопку "<button class="button-play"> 00:00:10</button>" - видео начинается с 20 секунд (от значения последней кнопки)

Почему этобывает?

Как решить эту проблему?

Заранее спасибо

Answer 1

Поскольку mediaTimeSeconds переназначается при каждом запуске цикла for.Поэтому ему присваивается последнее значение, а кнопка нажимается после того, как она назначена.Вам нужно изменить его на

(function() {

  'use strict';

  let media;
  let mediaBtn = document.querySelectorAll(".button-play");
  let mediaBtnPause = document.querySelectorAll(".button-pause");
  let mediaTime;
  let mediaTimeParts;

  $("iframe").mediaelementplayer({
    success: function(mediaElement, domObject) {
      media = mediaElement;
    }
  });

  for (let i = 0; i < mediaBtn.length; i++) {

    let mediaBtns = mediaBtn[i];

    mediaTime = mediaBtns.innerHTML;

    mediaTimeParts = mediaTime.split(':');

    const mediaTimeSeconds = (+mediaTimeParts[0]) * 60 * 60 + (+mediaTimeParts[1]) * 60 + (+mediaTimeParts[2]);

    //console.log(i + ' ' + mediaTimeSeconds);

    mediaBtns.addEventListener('click', function() {
      media.setCurrentTime(mediaTimeSeconds);
      media.play();

      console.log('Click button # ' + i);
    });

  }


})();