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

Posted 2023-05-07

【中文标题】如何使自定义视频播放器适用于多个视频？

【英文标题】：How to make custom video player applicable to multiple videos?

【发布时间】：2017-09-14 05:33:06

【问题描述】：

我的页面上有多个 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

谢谢，

最大

【参考方案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/