javascript - 为什么我的按钮启动时间不能正常工作？

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

示例 fiddle

现在事实证明，当您单击任何按钮(暂停除外)时 - 从最后一个按钮的值开始。在此示例中，从 20 秒开始。

例如，当您单击按钮 "<button class="button-play"> 00:00:10</button>" 时- 视频从 20 秒开始(从最后一个按钮的值开始)

为什么会这样？

如何解决这个问题？

提前致谢

Answer 1

因为每次运行 for 循环时都会重新分配 mediaTimeSeconds。因此，它被分配了最后一个值，而按钮在分配后被单击。您需要将其更改为

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

  }


})();