如何使自定义video播放器适用于多个video？

我的页面上有多个HTMLvideo，并希望将这个自定义video播放器应用于它们。 问题是，这仅适用于第一个video，而不适用于第二个，第三个和第四个video。 我不知道从哪里开始。 我做了一个当前状态的小提琴： JSFiddle

我的Javascript

/* Get Our Elements */ const player = document.querySelector('.player'); const video = player.querySelector('.viewer'); const progress = player.querySelector('.progress'); const progressBar = player.querySelector('.progress__filled'); const toggle = player.querySelector('.toggle'); const skipButtons = player.querySelectorAll('[data-skip]'); const ranges = player.querySelectorAll('.player__slider'); /* Build out functions */ function togglePlay() { const method = video.paused ? 'play' : 'pause'; video[method](); } function updateButton() { const icon = this.paused ? '►' : '❚❚'; toggle.textContent = icon; } function skip() { video.currentTime += parseFloat(this.dataset.skip); } function handleRangeUpdate() { video[this.name] = this.value; } function handleProgress() { const percent = (video.currentTime / video.duration) * 100; progressBar.style.flexBasis = `${percent}%`; } function scrub(e) { const scrubTime = (e.offsetX / progress.offsetWidth) * video.duration; video.currentTime = scrubTime; } /* Hook up the event listners */ video.addEventListener('click', togglePlay); video.addEventListener('play', updateButton); video.addEventListener('pause', updateButton); video.addEventListener('timeupdate', handleProgress); toggle.addEventListener('click', togglePlay); skipButtons.forEach(button => button.addEventListener('click', skip)); ranges.forEach(range => range.addEventListener('change', handleRangeUpdate)); ranges.forEach(range => range.addEventListener('mousemove', handleRangeUpdate)); let mousedown = false; progress.addEventListener('click', scrub); progress.addEventListener('mousemove', (e) => mousedown && scrub(e)); progress.addEventListener('mousedown', () => mousedown = true); progress.addEventListener('mouseup', () => mousedown = false); $('video').on('ended', function() { $.fn.fullpage.moveSlideRight(); }); 

我希望这个脚本能够处理页面上的每个video元素： JSFiddle

谢谢，

马克斯

Answer 1

你可以尝试这样的事情：

  /* Get Our Elements */ $('.player').each(function() { var player = $(this).get(0); var video = player.querySelector('.viewer'); var progress = player.querySelector('.progress'); var progressBar = player.querySelector('.progress__filled'); var toggle = player.querySelector('.toggle'); var skipButtons = player.querySelectorAll('[data-skip]'); var ranges = player.querySelectorAll('.player__slider'); /* Build out functions */ function togglePlay() { const method = video.paused ? 'play' : 'pause'; video[method](); } function updateButton() { const icon = this.paused ? '►' : '❚❚'; toggle.textContent = icon; } function skip() { video.currentTime += parseFloat(this.dataset.skip); } function handleRangeUpdate() { video[this.name] = this.value; } function handleProgress() { const percent = (video.currentTime / video.duration) * 100; progressBar.style.flexBasis = `${percent}%`; } function scrub(e) { const scrubTime = (e.offsetX / progress.offsetWidth) * video.duration; video.currentTime = scrubTime; } /* Hook up the event listners */ video.addEventListener('click', togglePlay); video.addEventListener('play', updateButton); video.addEventListener('pause', updateButton); video.addEventListener('timeupdate', handleProgress); toggle.addEventListener('click', togglePlay); skipButtons.forEach(button => button.addEventListener('click', skip)); ranges.forEach(range => range.addEventListener('change', handleRangeUpdate)); ranges.forEach(range => range.addEventListener('mousemove', handleRangeUpdate)); let mousedown = false; progress.addEventListener('click', scrub); progress.addEventListener('mousemove', (e) => mousedown && scrub(e)); progress.addEventListener('mousedown', () => mousedown = true); progress.addEventListener('mouseup', () => mousedown = false); $('video').on('ended', function() { $.fn.fullpage.moveSlideRight(); }); }); 

https://jsfiddle.net/kq5hdw0m/