[已解决]视频元素上层的元素标签设置事件

只是那个人 · 发表于 2024-4-2 15:21:47

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    .videoPaly {
      height: 500px;
      z-index: -9999;
    }
    p {
      /* float: left; */
      position: absolute;
      height: 20px;
      width: 67px;
      background-color: azure;
    }
    .p {
      top: 200px;
      left: 100px;
    }
    .w {
      top: 130px;
      left: 300px;
    }
    .t {
      top: 226px;
      left: 441px;
    }
    .a {
      top: 125px;
      left: 546px;
    }
  </style>
  <body>
    <p class="p">冲压工序</p>
    <p class="w">焊接工序</p>
    <p class="t">涂装工序</p>
    <p class="a">总装工序</p>
    <video src="./4月2日.mp4" class="videoPaly" autoplay muted loop></video>
    <audio class="voice" src="./FtccDemo/index/Audio/W音频.MP3"></audio>
  </body>
  <script>
    var w = document.querySelector(".w");
    var voice = document.querySelector(".voice");
    w.addEventListener("click", function () {
      console.log(11);
      if (voice.paused) {
        //如果当前是暂停状态
        voice.play(); //播放
      } else {
        //当前是播放状态
        voice.pause(); //暂停
      }
    });
  </script>
</html>

我在视频表面设置了标签元素class=w

我想对其设置点击事件来实现音频播放暂停功能或其他事件。
但是在页面中我却无法点击触发到该元素

最佳答案

月排行榜 / 总排行榜

FishC

2024-4-2 15:37:04

只是那个人发表于 2024-04-02 15:36
Document


.videoPaly {
   height:  ...

抱歉之前的回答没有解决您的问题。如果您将P标签放置在视频播放界面上方，但是无法选取并触发点击事件，可能是因为视频元素遮挡了P标签，导致无法正常点击。解决方法是为视频元素添加一个透明的背景，并将其设置为不可点击。以下是一个示例代码，您可以参考实现您的需求： .videoPlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0); pointer-events: none; } p { position: absolute; height: 20px; width: 67px; background-color: azure; } .w { top: 130px; left: 300px; } 冲压工序焊接工序涂装工序总装工序 var w = document.querySelector(".w"); var voice = document.querySelector(".voice"); w.addEventListener("click", function () { if (voice.paused) { // 如果当前是暂停状态 voice.play(); // 播放 } else { // 当前是播放状态 voice.pause(); // 暂停 } }); 在这个示例中，我们使用CSS样式为`.videoPlay`设置了透明的背景色，并使用`pointer-events: none`来阻止视频元素接收鼠标事件。这样，即使视频元素位于P标签上方，P标签仍然可以被点击并触发事件。请确保将`.videoPlay`替换为您实际使用的视频元素的选择器，并将`.voice`替换为您实际使用的音频元素的选择器。这样，当用户点击P标签时，音频就会播放或暂停。

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。

跳转到最佳答案楼层

FishC · 发表于 2024-4-2 15:22:15

您无法点击触发到视频上层元素的原因是，视频元素的z-index被设置为了-9999，这使得视频元素处于其他元素之下，无法接收鼠标事件。解决方法是将视频元素的z-index设置为更高的值，使其位于其他元素之上。

您可以尝试修改视频元素的样式代码，如将.z-index的值设置为1：

.videoPlay {
  height: 500px;
  z-index: 1;
}

然后再次尝试点击视频上方的元素，应该可以触发相应的事件了。

另外，您的代码中使用了voice.play()和voice.pause()，但是没有定义voice变量。如果您想使用视频元素进行音频播放暂停操作，可以将var voice = document.querySelector(".voice");修改为var voice = document.querySelector(".videoPlay");。

最终的代码如下所示：

<!DOCTYPE html>
<html>
<head>
  <style>
    .videoPlay {
      height: 500px;
      z-index: 1;
    }
    p {
      position: absolute;
      height: 20px;
      width: 67px;
      background-color: azure;
    }
    .p {
      top: 200px;
      left: 100px;
    }
    .w {
      top: 130px;
      left: 300px;
    }
    .t {
      top: 226px;
      left: 441px;
    }
    .a {
      top: 125px;
      left: 546px;
    }
  </style>
</head>
<body>
  <div class="videoPlay"></div>

  <p class="w">冲压工序</p>
  <p class="t">焊接工序</p>
  <p class="a">涂装工序</p>
  <p class="p">总装工序</p>
  
  <script>
    var video = document.querySelector(".videoPlay");

    video.addEventListener("click", function () {
      if (video.paused) {
        // 如果当前是暂停状态
        video.play(); // 播放
      } else {
        // 当前是播放状态
        video.pause(); // 暂停
      }
    });
  </script>
</body>
</html>

请注意，这里假设您的视频元素是一个空的div元素，并且您需要替换".videoPlay"选择器为您实际使用的视频元素的选择器。

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。

只是那个人 · 发表于 2024-4-2 15:31:05

FishC 发表于 2024-4-2 15:22
您无法点击触发到视频上层元素的原因是，视频元素的z-index被设置为了-9999，这使得视频元素处于其他元素之 ...

我不需要对视频进行控制，视频只是作为背景，我需要控制的是音频voice，通过点击类名为w的class="w"的p标签来控制该元素的播放暂停

FishC · 发表于 2024-4-2 15:31:26

只是那个人发表于 2024-04-02 15:31
我不需要对视频进行控制，视频只是作为背景，我需要控 ...

非常抱歉之前的回答理解有误。如果您只需要控制音频元素的播放暂停，可以将事件添加到类名为"w"的p标签上。以下是一个示例代码，您可以参考实现您的需求：

<!DOCTYPE html>
<html>
<head>
    <style>
        .videoPlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: -1;
        }

        p {
            position: absolute;
            height: 20px;
            width: 67px;
            background-color: azure;
        }

        .w {
            top: 130px;
            left: 300px;
        }
    </style>
</head>
<body>
    <video class="videoPlay" src="your_video_url.mp4" muted autoplay loop></video>
    <div class="w">
        <p>点击我控制音频</p>
    </div>

    <script>
        var audio = new Audio('your_audio_url.mp3');
        var p = document.querySelector('.w p');

        p.addEventListener('click', function() {
            if (audio.paused) {
                audio.play();
                p.textContent = '音频正在播放';
            } else {
                audio.pause();
                p.textContent = '音频已暂停';
            }
        });
    </script>
</body>
</html>

在这个示例中，我们首先使用CSS样式将视频元素 `.videoPlay` 设置为绝对定位，并通过 `z-index` 属性将其置于其他元素上层作为背景。然后，我们创建了一个音频元素 `audio` 并通过类名为 `w` 的 `p` 标签来控制音频的播放暂停。当用户点击该标签时，我们使用 `audio.play()` 和 `audio.pause()` 方法来控制音频的播放和暂停，并相应地修改 `p` 标签的文本内容。

请确保将 `your_video_url.mp4` 和 `your_audio_url.mp3` 替换为实际的视频和音频文件的URL。这样，当用户点击标签时，音频就会播放或暂停。

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。

只是那个人 · 发表于 2024-4-2 15:36:47

FishC 发表于 2024-4-2 15:31
非常抱歉之前的回答理解有误。如果您只需要控制音频元素的播放暂停，可以将事件添加到类名为"w"的p标签 ...

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    .videoPaly {
      height: 500px;
      z-index: -9999;
    }
    p {
      /* float: left; */
      position: absolute;
      height: 20px;
      width: 67px;
      background-color: azure;
    }
    .p {
      top: 200px;
      left: 100px;
    }
    .w {
      top: 130px;
      left: 300px;
    }
    .t {
      top: 226px;
      left: 441px;
    }
    .a {
      top: 125px;
      left: 546px;
    }
  </style>
  <body>
    <p class="p">冲压工序</p>
    <p class="w">焊接工序</p>
    <p class="t">涂装工序</p>
    <p class="a">总装工序</p>
    <video src="./4月2日.mp4" class="videoPaly" autoplay muted loop></video>
    <audio class="voice" src="./FtccDemo/index/Audio/W音频.MP3"></audio>
  </body>
  <script>
    var w = document.querySelector(".w");
    var voice = document.querySelector(".voice");
    w.addEventListener("click", function () {
      console.log(11);
      if (voice.paused) {
        //如果当前是暂停状态
        voice.play(); //播放
      } else {
        //当前是播放状态
        voice.pause(); //暂停
      }
    });
  </script>
</html>

我的代码中有一个audio标签，我是想对他进行控制，现在的问题是我将P标签放置在了视频播放界面的上方，倒是我无法选取点击到这些P元素，从而无法触发事件。我将视频层级设置为-9999也不行

FishC · 发表于 2024-4-2 15:37:04

只是那个人发表于 2024-04-02 15:36
Document


.videoPaly {
   height:  ...

抱歉之前的回答没有解决您的问题。如果您将P标签放置在视频播放界面上方，但是无法选取并触发点击事件，可能是因为视频元素遮挡了P标签，导致无法正常点击。解决方法是为视频元素添加一个透明的背景，并将其设置为不可点击。以下是一个示例代码，您可以参考实现您的需求： .videoPlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0); pointer-events: none; } p { position: absolute; height: 20px; width: 67px; background-color: azure; } .w { top: 130px; left: 300px; } 冲压工序焊接工序涂装工序总装工序 var w = document.querySelector(".w"); var voice = document.querySelector(".voice"); w.addEventListener("click", function () { if (voice.paused) { // 如果当前是暂停状态 voice.play(); // 播放 } else { // 当前是播放状态 voice.pause(); // 暂停 } }); 在这个示例中，我们使用CSS样式为`.videoPlay`设置了透明的背景色，并使用`pointer-events: none`来阻止视频元素接收鼠标事件。这样，即使视频元素位于P标签上方，P标签仍然可以被点击并触发事件。请确保将`.videoPlay`替换为您实际使用的视频元素的选择器，并将`.voice`替换为您实际使用的音频元素的选择器。这样，当用户点击P标签时，音频就会播放或暂停。

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。

账号		自动登录	找回密码
密码			立即注册