当我点击html5中的图像时，播放视频时控件不起作用

controls are not working while playing a video when i click on image in html5?

本文关键字：播放 视频 不起作用 控件 图像 html5      更新时间：2023-09-26

我正在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();
        }
    }

显然这是错误的，因为您总是选择相同的元素（第一个视频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进行选择。

相关文章：