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

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

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

我知道这是因为当我单击“播放/暂停”时，if语句中用作条件的lastClicked变量将包含一个按钮，而按钮没有这些功能。到目前为止，我已经明白了很多，但我有点不知道下一步该做什么

我应该引用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:

&时代；
►
X
&时代；
►
X

基本上，您需要将按钮与视频关联起来

当前

toggleVideo（）

假定它在

video

元素的上下文中运行，而它可以是视频或与视频关联的按钮

您不知道如何显示HTML结构，但对于这个答案，我将使用以下视频按钮关系

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

---

基本上你需要把你的按钮和你的视频联系起来

当前

toggleVideo（）

假定它在

video

元素的上下文中运行，而它可以是视频或与视频关联的按钮

您不知道如何显示HTML结构，但对于这个答案，我将使用以下视频按钮关系

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

---

这段代码尤其不起作用，但它确实导致了我的解决方案。我没有使用this.previousSibling，而是使用this.parentNode.previousElementSibling以我上面发布的代码中的视频为目标。现在，我既可以单击模式，也可以单击播放/暂停按钮来启动和停止视频。非常感谢你！这段代码尤其不起作用，但它确实导致了我的解决方案。我没有使用this.previousSibling，而是使用this.parentNode.previousElementSibling以我上面发布的代码中的视频为目标。现在，我既可以单击模式，也可以单击播放/暂停按钮来启动和停止视频。非常感谢你！

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();

}