如何使小段代码减少重复性？

Question

我在页面中有两个不同的视频播放器，现在它们正在按预期工作，但是，代码本身看起来很愚蠢且不必要地重复，但是我不确定如何在删除基本复制的代码块时使其工作。

有两个带有单独视频的div：

第一

<video class='video2' poster='./assets/video2.jpg' src='./assets/video2.mp4'></video>
              <div class='buttons'>
                  <button id='playPause2'><img src='./assets/play.png'></button>
                </div>

第二

<video class='video1' poster='./assets/videoPoster.jpg' src='./assets/video1.mp4'></video>
      <div class='buttons'>
        <button id='playPause1'><img src='./assets/play.png'></button>
      </div>

运行视频的JS如下

var video1 = document.querySelector('.video1');
var video2 = document.querySelector('.video2');
var btn1 = document.getElementById('playPause1');
var btn2 = document.getElementById('playPause2');

function togglePlayPause1() {
  if (video1.paused) {
    btn1.className = 'pause';
    video1.play();
  } else {
    btn1.className = 'play';
    video1.pause();
  }
}

function togglePlayPause2() {
  if (video2.paused) {
    btn2.className = 'pause';
    video2.play();
  } else {
    btn2.className = 'play';
    video2.pause();
  }
}

btn1.onclick = function() {
  togglePlayPause1();
};

btn2.onclick = function() {
  togglePlayPause2();
};

正如我说的那样，它可以工作，但是看起来很傻，基本上相同的代码重复两次。在保持相同功能的情况下，如何使此清洁器更清洁？

Answer 1

var video1 = document.querySelector('.video1');
var video2 = document.querySelector('.video2');
var btn1 = document.getElementById('playPause1');
var btn2 = document.getElementById('playPause2');

function togglePlayPause(video) {
  if (video.paused) {
    this.className = 'pause';
    video.play();
  } else {
    this.className = 'play';
    video.pause();
  }
}


var videos = [video1,video2];
[btn1,btn2].forEach(function(el,i){
  el.onclick = function()
  {
      togglePlayPause(videos[i]);
  }
})