javascript - 关于将此代码从 querySelector 扩展到 querySelectorAll 的建议

Question

我有一个带有 JS、html 和 css 的自定义视频播放器。我的问题的关键是我没有预料到将其从一个视频扩展到两个视频，我希望重构它，以便我可以在一个页面上播放多个视频。我尝试将所有内容重写为 forEach 但无法破解它。真的只需要有人在这里插入我走向正确的方向:

Fiddle

我的想法是简单地将 constplayer = document.querySelector('.custom-video-player'); 更改为 constplayers = document.querySelectorAll('.custom-video- player'); 然后范围如下:

players.forEach((player) => {
 // declare all the consts here... and event listeners
})

但是，这种方法并没有真正发挥作用。理想情况下，我想偷懒，不重写 player 的每个实例。在这一点上我很困难......

<小时/>

HTML

 <div class="cs__video">
  <div class="custom-video-player">
    <video class="player__video viewer" src="http://techslides.com/demos/sample-videos/small.mp4"></video>
  </div>
  <div class="custom-video-player">
    <video class="player__video viewer" src="http://techslides.com/demos/sample-videos/small.mp4"></video>
  </div>
</div>

JS

 /* custom video player javascripts */
  // declaring elements
  const player = document.querySelector('.custom-video-player');
  const video = player.querySelector('.viewer');

  /* Build out functions */
  function togglePlay() {
    console.log('playing');
    const method = video.paused ? 'play' : 'pause';
    video[method]();
  }

  /* event listeners */
  video.addEventListener('click', togglePlay);
  video.addEventListener('play', updateButton);
  video.addEventListener('pause', updateButton);
  toggle.addEventListener('click', togglePlay);

Answer 1

如果您从class创建每个玩家，您可能会发现管理多个玩家会更容易。其中包括所有相关的设置和方法。

一旦为所有玩家创建了职业，就可以轻松创建任意数量的职业。

这是一个从视频源数组(也可用作 fiddle )创建两个播放器的数组的示例。

class Player {

  // We call `new Player()` with two arguments, the id
  // and the video source
  constructor(id, src) {

    // We assign both id and src to the class
    this.id = id;
    this.src = src;

    // Then we call two functions, one to generate the
    // video HTML, and one to add it to the page
    const html = this.generateHTML(id);
    this.addHTMLToDOM(html);
  }

  // We use a template literal to build our HTML
  // using the id and src we passed into the class earlier
  generateHTML() {
    return (
      `<div data-player=${this.id}>Player ${this.id}</div>
      <video controls width="250">
      <source src="${this.src}" type="video/mp4" />
      Sorry, your browser doesn't support embedded videos.
      </video>`
    ); 
  }

  // This method simply adds the player HTML
  //  to the document body
  addHTMLToDOM(html) {
    document.body.insertAdjacentHTML('beforeend', html);
  }
  
  // play and pause are a couple of example methods for
  // player control. `return this` allows for the methods
  // to be chained (see below)
  play() {
    console.log(`Playing video ${this.id}`);
    return this;
  }

  pause() {
    console.log(`Pausing video ${this.id}`);
    return this;
  }

}

// An array of video sources
const srcs = [
  'http://techslides.com/demos/sample-videos/small.mp4',
  'http://techslides.com/demos/sample-videos/small.mp4'
]

// `map` over the srcs array to create an array of new players
const players = srcs.map((src, i) => new Player(++i, src));

// An example to show how we can call the player instance methods
players[0].play().pause();
players[1].play().pause();