问题描述
我使用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秒开始（从最后一个按钮的值开始）
为什么会发生？
如何解决这个问题呢？
先感谢您
1楼
Nguyen Phong Thien
1
2019-02-21 12:49:12
因为在每次运行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);
});
}
})();