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

时间:2019-02-21 12:43:50

标签: javascript jquery html5 css3 html5-video

我使用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秒开始(从最后一个按钮的值开始)

为什么会这样?

如何解决这个问题?

提前谢谢

1 个答案:

答案 0 :(得分: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);
    });

  }


})();