如何使自定义视频播放器适用于多个视频? [英] How to make custom video player applicable to multiple videos?

问题描述

我的页面上有多个HTML视频，并希望将此自定义视频播放器应用于它们.问题是，这仅适用于第一个视频，不适用于第二个，第三个和第四个视频. 我不知道从哪里开始. 我整理了当前状态: JSFiddle

I have multiple HTML videos on my page, and want to apply this custom video player to them. The thing is, this only works for the first video, and not for the second, third and fourth. I have no idea where to start. I made a fiddle of the current state: JSFiddle

我的Javascript

My 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

I want this script to work on every video element on the page: JSFiddle

谢谢

最大

推荐答案

您可以尝试以下方法:

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

这篇关于如何使自定义视频播放器适用于多个视频?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！