使用一个功能播放/暂停多个视频

Play/Pause multiple video with one function

本文关键字：播放 暂停 视频 功能 一个      更新时间：2023-09-26

我目前可以通过单击<video>标签中的任意位置来播放和暂停视频。但不幸的是，当我添加第二个视频时，该功能仅适用于第一个视频。

 var video = document.getElementById('vid');
    video.addEventListener('click', function() {
                this.paused?this.play():this.pause();
            },
            false);
    video.addEventListener("pause", function() {
        document.getElementById("paused").style.display = "";
    });
    video.addEventListener("play", function() {
        document.getElementById("paused").style.display = "none";
    });
<div id="main">
  <div id="computer" class="content">
    <div style="margin-left:8%">
      <div id="paused" style="display: none">QUESTION HERE</div>
      <video width="1000" height="480" id="vid">
        <source src="video.mp4" type="video/mp4">
          Your browser does not support the video tag.
      </video>
    </div>
  </div>
  <div id="ip" class="content">
    <div style="margin-left:8%">
      <div id="paused" style="display: none">QUESTION HERE</div>
      <video width="1000" height="480" id="vid">
        <source src="video2.mp4" type="video/mp4">
          Your browser does not support the video tag.
      </video>
    </div>
  </div>
</div>

js 代码的任何问题。恳请指教。

它不起作用，因为解释器只会考虑具有相同元素的最后一个id，如果您只使用两个视频，那么您可以添加其他视频ID和暂停的ID

<div id="ip" class="content">
<div style="margin-left:8%">
  <div id="paused2" style="display: none">QUESTION HERE</div>
  <video width="1000" height="480" id="vid2">
    <source src="video2.mp4" type="video/mp4">
      Your browser does not support the video tag.
  </video>
</div>

尝试使用 id 的类有关更多详细信息，请访问此页面http://flash.flowplayer.org/demos/installation/multiple-players.html

相关文章：