当我单击html5中的图像时，播放视频时控件无法正常工作？

Question

我正在用HTML5播放两个视频，我写了一些Javascript来控制播放/暂停选项。 如果我单击海报，则正在播放视频。 但是，如果我使用2个视频，则在这种情况下，播放/暂停按钮无法正常工作。 有时，当我单击第二个视频时，就会播放第一个视频。

我想将控件分别应用于视频。

<video onclick="playVideo()" width="320" height="240" poster="images/Koala.jpg" controls="controls">
        <source type="video/mp4" src="videos/clipcanvas.mp4" />
    </video>
    <video onclick="playVideo()" width="320" height="240" poster="images/Koala.jpg" controls="controls">
        <source type="video/mp4" src="videos/clipcanvas.mp4" />
    </video>

脚本代码：

function playVideo() {
        //alert("hello");
        var myVideo = document.getElementsByTagName("video")[0];
        if (myVideo.paused) {
            myVideo.play();
        } else {
            myVideo.pause();
        }

    }

Answer 1

显然，这是不正确的，因为您总是选择相同的元素（第一个视频el）。

因此，请更改此行var myVideo = document.getElementsByTagName("video")[0]; 。

1. 最简单的方法是

    onclick="playVideo(this)"; // this refer to the correspondingly video el function playVideo(myVideo) { // var myVideo = document.getElementsByTagName("video")[0]; //remove this // do whatever as you like } 

2. 改用其他选择器。 例如，给两个video不同的ID，然后按ID选择。