Question

我目前正在开发一个网站，其中包含一系列十二个HTML5视频，这些视频会在每个视频的单独模式框中自动开始播放。现在我想让用户控制播放和暂停视频（以及其他功能，但这与我当前的问题无关）。

到目前为止，用户可以点击视频本身来播放和暂停视频。但是我添加的播放/暂停按钮现在不起作用，下面的代码会给我一个＆＃34; lastClicked.pause不是一个函数＆＃34;错误。

我知道原因是因为我在if语句中使用的lastClicked变量将包含一个按钮，当我点击＆＃34;播放/暂停＆＃34;并且按钮没有这些功能。到目前为止，我已经弄清楚了这一点，但是我的下一步应该是有点迷失。

我应该引用toggleVideo函数中的特定视频并将其替换为lastClicked变量，还是存在更简单的解决方案？

编辑：添加了一些HTML以供参考

使用Javascript：

// VIDEO CONTROLS
const portfolio = document.querySelector(".portfolio");
const player = portfolio.querySelectorAll(".viewer");
const toggle = portfolio.querySelectorAll(".toggle");

let lastClicked

function toggleVideo () {

    lastClicked = this;

    if(lastClicked.paused) {
        lastClicked.play();    
    }

    else {
        lastClicked.pause();
    }

  }

// Two different ways to play/pause the video - Clicking the video 
// itself and clicking the play/pause button

player.forEach(video => video.addEventListener ("click", toggleVideo ));
toggle.forEach(button => button.addEventListener ("click", toggleVideo ));

HTML：

<section class="portfolio" id="portfolio">


      <div class="video-wrapper">
          <div class="video-thumbnail"><img src="./media/img/thumbnails/1.hammerfall.jpg"></div>
          <button class="video-overlay" id="player" data-modal="videoOne"></button>
      </div
      ><div class="modal-box">
        <div class="modal-content">
          <span class="close-btn">&times;</span>
          <div class="player">
            <video class="player__video viewer" src="./media/video/1.waves.mp4"></video>

            <div class="video-controller">
              <div class="progress-bar">
                <div class="progress-filled"></div>
              </div>
                <button class="video-play toggle">►</button>
                <input type="range" name="volume" class="player-slider" min=0 max=1 step="0,05" value="1">
                <button class="video-volume mute">X</button>
            </div>
          </div>
        </div>
      </div

      ><div class="video-wrapper">
          <div class="video-thumbnail"><img src="./media/img/thumbnails/2.lordi.jpg"></div>
          <button class="video-overlay" data-modal="videoTwo"></button>
      </div
      ><div class="modal-box">
        <div class="modal-content">
          <span class="close-btn">&times;</span>
            <div class="player">
          <video class="player__video viewer" src="./media/video/2.words.mp4"></video>

            <div class="video-controller">
              <div class="progress-bar">
                <div class="progress-filled"></div>
              </div>
                <button class="video-play toggle">►</button>
                <input type="range" name="volume" class="player-slider" min=0 max=1 step="0,05" value="1">
                <button class="video-volume mute">X</button>
            </div>
          </div>
        </div>
      </div
      >
</section>

Answer 1

基本上，您需要将按钮与视频相关联。

目前toggleVideo()假设它在video元素的上下文中运行，而它可能是视频或按钮关联视频。

您不知道显示您的HTML结构，但对于此答案，我将使用以下视频 - 按钮关系。

<div>
    <video />
    <button>Toggle</button>
</div>

...在我惯用的例子中，按钮是视频的下一个兄弟。 video和button之间的确切关系并不重要，只是我们在toggleVideo()内建立并满足它。

所以，现在变成了：

function toggleVideo () {

    //establish video - might be @this, or might be prev sibling of @this
    let vid = this.tagName == 'VIDEO' ? this : this.previousSibling;

    lastClicked = vid;
    vid.paused ? vid.play() : vid.pause();

}

如何在javascript中为多个html5视频使用播放/暂停按钮？

1 个答案: