¿Cómo hacer que un reproductor de video personalizado sea aplicable a múltiples videos?

Tengo varios videos HTML en mi página y deseo aplicarles este reproductor de video personalizado. El caso es que esto solo funciona para el primer video, y no para el segundo, tercero y cuarto. No tengo idea de por dónde empezar. Hice un violín del estado actual: JSFiddle

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

Quiero que este script funcione en cada elemento de video en la página: JSFiddle

Gracias,

Max

Puedes probar algo como esto:

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

    Intereting Posts