如何使自定義視頻播放器適用於多個視頻？

我的網頁上有多個HTML視頻，並且想要將這個自定義視頻播放器應用到他們。事情是，這隻適用於第一個視頻，而不適用於第二，第三和第四。我不知道從哪裏開始。我所做的當前狀態的小提琴：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(); 
    });

我想這個腳本每個頁面上的視頻元素上工作： JSFiddle

感謝，

最大

來源

2017-04-18 Max Seelig

你可以嘗試這樣的事情：

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

來源

2017-04-18 11:55:39

如何使自定義視頻播放器適用於多個視頻？

回答

相關問題