我想用纯 JS 播放每个视频的每个按钮

Question

我有一个页面，其中有多个视频我创建了一个自定义按钮来播放视频问题是我想写一个JS来实现这个而不是为每个视频写多个js代码

<video id="video"> </video>
<button id="circle-play-b">play</button

<video id="video"> </video>
<button id="circle-play-b">play</button

JS

var video = document.getElementById("video");
                                                        
  var circlePlayButton = document.getElementById("circle-play-b");
console.log(video);
function togglePlay() {
    if (video.paused || video.ended) {
        video.play();
    } else {
        video.pause();
    }
}

circlePlayButton.addEventListener("click", togglePlay);
video.addEventListener("playing", function () {
    circlePlayButton.style.opacity = 0;
});
video.addEventListener("pause", function () {
    circlePlayButton.style.opacity = 1;
});

我可以选择为每个视频添加唯一 ID

Answer 1

您必须为每个视频设置单独的监听器elements.And使用class名称而不是 ID。

document.getElementByClassName returns 元素数组。遍历数组并为每个元素设置侦听器。

Html

<video class="videos"> </video>
<button class="circle-play-b">play</button>

<video class="videos"> </video>
<button class="circle-play-b">play</button>

Js

var videos = document.getElementsByClassName("videos");
                                                        
var circlePlayButton = document.getElementsByClassName("circle-play-b");

for (let i = 0; i < circlePlayButton.length; i++) {
  let playBtn = circlePlayButton[i];
  let video = videos[i];
  function togglePlay() {
    if (video.paused || video.ended) {
        video.play();
    } else {
        video.pause();
    }
  }
  playBtn.addEventListener('click', togglePlay);
  video.addEventListener("playing", function () {
    playBtn.style.opacity = 0;
  });
  video.addEventListener("pause", function () {
      playBtn.style.opacity = 1;
  });
}

希望对解决您的问题有所帮助

Answer 2

一种有效的方法是将视频和按钮结构视为可重用组件。

因此可以提供一个通用的编写（没有同名的 id 属性）封闭的 html 结构（嵌入了 <video/> 和 <button/> 元素在父元素或根元素中）。
然后将实现一个初始化函数，该函数查询 HTML structures/components 并注册所需的每个事件处理程序。
当然，任何处理程序和辅助函数的实现（和命名）方式都是一次针对一个problem/task（...这使得代码重用如图所示下一个提供的示例代码）...

function getToggleControl(elmVideo) {
  return elmVideo
    .closest('figure')
    .querySelector('button');
}
function updateToggleControl(toggleControl, isPaused) {
  const { dataset } = toggleControl;  
  const controlText = isPaused
    ? dataset.textTogglePlay
    : dataset.textTogglePause;

  toggleControl.textContent = controlText;
  toggleControl.title = controlText;
}

function handleToggleState({ currentTarget: toggleControl }) {
  const elmVideo = toggleControl
    .closest('figure')
    .querySelector('video');

  if (elmVideo) {
    const isPaused = elmVideo.paused || elmVideo.ended;

    if (isPaused) {
      elmVideo.play();
    } else {
      elmVideo.pause();
    }
    updateToggleControl(toggleControl, !isPaused);  
  }
}

function handleVideoPlaying({ currentTarget: elmVideo }) {
  const toggleControl = getToggleControl(elmVideo);

  if (toggleControl) {
    toggleControl.style.opacity = .2;

    updateToggleControl(toggleControl, false);
  }
}
function handleVideoPaused({ currentTarget: elmVideo }) {
  const toggleControl = getToggleControl(elmVideo);

  if (toggleControl) {
    // initially enable the video pause/play button.
    toggleControl.disabled && (toggleControl.disabled = false);

    toggleControl.style.opacity = 1;

    updateToggleControl(toggleControl, true);
  }
}

function initVideoPausePlay() {
  document
    .querySelectorAll('figure[data-video-pause-play] video')
    .forEach(elmVideo => {

      elmVideo.addEventListener('canplay', handleVideoPaused);

      elmVideo.addEventListener('pause', handleVideoPaused);
      elmVideo.addEventListener('playing', handleVideoPlaying);

      getToggleControl(elmVideo)
        ?.addEventListener('click', handleToggleState);
    });
}
initVideoPausePlay();

* { margin: 0; padding: 0; }
figure { display: inline-block; width: 40%; }
figure video { display: inline-block; width: 100%; }

<figure data-video-pause-play>
  <video controls muted>
    <source src="https://ia902803.us.archive.org/15/items/nwmbc-Lorem_ipsum_video_-_Dummy_video_for_your_website/Lorem_ipsum_video_-_Dummy_video_for_your_website.mp4" type="video/mp4"> 
    <source src="https://archive.org/embed/nwmbc-Lorem_ipsum_video_-_Dummy_video_for_your_website/Lorem_ipsum_video_-_Dummy_video_for_your_website.HD.mov" type="video/quicktime"> 
  </video>

  <button
    disabled
    class="circle-play-b"
    data-text-toggle-play="play"
    data-text-toggle-pause="pause">
    ...
  </button>
</figure>

<figure data-video-pause-play>
  <video controls muted>
    <source src="https://ia902803.us.archive.org/15/items/nwmbc-Lorem_ipsum_video_-_Dummy_video_for_your_website/Lorem_ipsum_video_-_Dummy_video_for_your_website.mp4" type="video/mp4"> 
    <source src="https://archive.org/embed/nwmbc-Lorem_ipsum_video_-_Dummy_video_for_your_website/Lorem_ipsum_video_-_Dummy_video_for_your_website.HD.mov" type="video/quicktime"> 
  </video>

  <button
    disabled
    class="circle-play-b"
    data-text-toggle-play="play"
    data-text-toggle-pause="pause">
    ...
  </button>
</figure>

我想用纯 JS 播放每个视频的每个按钮

I want to play each button for each video in pure JS

javascript

event-handling

components

dom-events

code-reuse