设为首页收藏本站
切换到窄版

鱼C论坛

 找回密码
 立即注册
鱼C论坛»论坛 › 编程语言专区 › Web开发 › 视频元素上层的元素标签设置事件
返回列表 发新帖
查看: 695|回复: 5

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

[复制链接]
只是那个人
发表于 2024-4-2 15:21:47 | 显示全部楼层 |阅读模式

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

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

x
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>Document</title>
  7.   </head>
  8.   <style>
  9.     .videoPaly {
  10.       height: 500px;
  11.       z-index: -9999;
  12.     }
  13.     p {
  14.       /* float: left; */
  15.       position: absolute;
  16.       height: 20px;
  17.       width: 67px;
  18.       background-color: azure;
  19.     }
  20.     .p {
  21.       top: 200px;
  22.       left: 100px;
  23.     }
  24.     .w {
  25.       top: 130px;
  26.       left: 300px;
  27.     }
  28.     .t {
  29.       top: 226px;
  30.       left: 441px;
  31.     }
  32.     .a {
  33.       top: 125px;
  34.       left: 546px;
  35.     }
  36.   </style>
  37.   <body>
  38.     <p class="p">冲压工序</p>
  39.     <p class="w">焊接工序</p>
  40.     <p class="t">涂装工序</p>
  41.     <p class="a">总装工序</p>
  42.     <video src="./4月2日.mp4" class="videoPaly" autoplay muted loop></video>
  43.     <audio class="voice" src="./FtccDemo/index/Audio/W音频.MP3"></audio>
  44.   </body>
  45.   <script>
  46.     var w = document.querySelector(".w");
  47.     var voice = document.querySelector(".voice");
  48.     w.addEventListener("click", function () {
  49.       console.log(11);
  50.       if (voice.paused) {
  51.         //如果当前是暂停状态
  52.         voice.play(); //播放
  53.       } else {
  54.         //当前是播放状态
  55.         voice.pause(); //暂停
  56.       }
  57.     });
  58.   </script>
  59. </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 小助理，如未能正确解答您的问题，请继续追问。
小甲鱼最新课程 -> https://ilovefishc.com
回复

使用道具 举报

FishC
发表于 2024-4-2 15:22:15 | 显示全部楼层
您无法点击触发到视频上层元素的原因是，视频元素的z-index被设置为了-9999，这使得视频元素处于其他元素之下，无法接收鼠标事件。解决方法是将视频元素的z-index设置为更高的值，使其位于其他元素之上。

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

  1. .videoPlay {
  2.   height: 500px;
  3.   z-index: 1;
  4. }
复制代码


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

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

最终的代码如下所示：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <style>
  5.     .videoPlay {
  6.       height: 500px;
  7.       z-index: 1;
  8.     }
  9.     p {
  10.       position: absolute;
  11.       height: 20px;
  12.       width: 67px;
  13.       background-color: azure;
  14.     }
  15.     .p {
  16.       top: 200px;
  17.       left: 100px;
  18.     }
  19.     .w {
  20.       top: 130px;
  21.       left: 300px;
  22.     }
  23.     .t {
  24.       top: 226px;
  25.       left: 441px;
  26.     }
  27.     .a {
  28.       top: 125px;
  29.       left: 546px;
  30.     }
  31.   </style>
  32. </head>
  33. <body>
  34.   <div class="videoPlay"></div>

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

  44.     video.addEventListener("click", function () {
  45.       if (video.paused) {
  46.         // 如果当前是暂停状态
  47.         video.play(); // 播放
  48.       } else {
  49.         // 当前是播放状态
  50.         video.pause(); // 暂停
  51.       }
  52.     });
  53.   </script>
  54. </body>
  55. </html>
复制代码


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

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

只是那个人
 楼主| 发表于 2024-4-2 15:31:05 | 显示全部楼层
FishC 发表于 2024-4-2 15:22
您无法点击触发到视频上层元素的原因是，视频元素的z-index被设置为了-9999，这使得视频元素处于其他元素之 ...

我不需要对视频进行控制，视频只是作为背景，我需要控制的是音频voice，通过点击类名为w的class="w"的p标签来控制该元素的播放暂停
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

FishC
发表于 2024-4-2 15:31:26 | 显示全部楼层
只是那个人 发表于 2024-04-02 15:31
我不需要对视频进行控制，视频只是作为背景，我需要控 ...


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

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <style>
  5.         .videoPlay {
  6.             position: absolute;
  7.             top: 0;
  8.             left: 0;
  9.             width: 100%;
  10.             height: 100%;
  11.             object-fit: cover;
  12.             z-index: -1;
  13.         }

  15.         p {
  16.             position: absolute;
  17.             height: 20px;
  18.             width: 67px;
  19.             background-color: azure;
  20.         }

  22.         .w {
  23.             top: 130px;
  24.             left: 300px;
  25.         }
  26.     </style>
  27. </head>
  28. <body>
  29.     <video class="videoPlay" src="your_video_url.mp4" muted autoplay loop></video>
  30.     <div class="w">
  31.         <p>点击我控制音频</p>
  32.     </div>

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

  38.         p.addEventListener('click', function() {
  39.             if (audio.paused) {
  40.                 audio.play();
  41.                 p.textContent = '音频正在播放';
  42.             } else {
  43.                 audio.pause();
  44.                 p.textContent = '音频已暂停';
  45.             }
  46.         });
  47.     </script>
  48. </body>
  49. </html>
复制代码


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

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

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

只是那个人
 楼主| 发表于 2024-4-2 15:36:47 | 显示全部楼层
FishC 发表于 2024-4-2 15:31
非常抱歉之前的回答理解有误。如果您只需要控制音频元素的播放暂停，可以将事件添加到类名为"w"的p标签 ...
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>Document</title>
  7.   </head>
  8.   <style>
  9.     .videoPaly {
  10.       height: 500px;
  11.       z-index: -9999;
  12.     }
  13.     p {
  14.       /* float: left; */
  15.       position: absolute;
  16.       height: 20px;
  17.       width: 67px;
  18.       background-color: azure;
  19.     }
  20.     .p {
  21.       top: 200px;
  22.       left: 100px;
  23.     }
  24.     .w {
  25.       top: 130px;
  26.       left: 300px;
  27.     }
  28.     .t {
  29.       top: 226px;
  30.       left: 441px;
  31.     }
  32.     .a {
  33.       top: 125px;
  34.       left: 546px;
  35.     }
  36.   </style>
  37.   <body>
  38.     <p class="p">冲压工序</p>
  39.     <p class="w">焊接工序</p>
  40.     <p class="t">涂装工序</p>
  41.     <p class="a">总装工序</p>
  42.     <video src="./4月2日.mp4" class="videoPaly" autoplay muted loop></video>
  43.     <audio class="voice" src="./FtccDemo/index/Audio/W音频.MP3"></audio>
  44.   </body>
  45.   <script>
  46.     var w = document.querySelector(".w");
  47.     var voice = document.querySelector(".voice");
  48.     w.addEventListener("click", function () {
  49.       console.log(11);
  50.       if (voice.paused) {
  51.         //如果当前是暂停状态
  52.         voice.play(); //播放
  53.       } else {
  54.         //当前是播放状态
  55.         voice.pause(); //暂停
  56.       }
  57.     });
  58.   </script>
  59. </html>
复制代码


我的代码中有一个audio标签， 我是想对他进行控制，现在的问题是我将P标签放置在了视频播放界面的上方，倒是我无法选取点击到这些P元素，从而无法触发事件。我将视频层级设置为-9999也不行
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

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 小助理，如未能正确解答您的问题，请继续追问。
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2025-5-4 19:03

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表