视频元素上层的元素标签设置事件
<!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
我想对其设置点击事件来实现音频播放暂停功能或其他事件。
但是在页面中我却无法点击触发到该元素
您无法点击触发到视频上层元素的原因是，视频元素的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 小助理，如未能正确解答您的问题，请继续追问。 FishC 发表于 2024-4-2 15:22
您无法点击触发到视频上层元素的原因是，视频元素的z-index被设置为了-9999，这使得视频元素处于其他元素之 ...
我不需要对视频进行控制，视频只是作为背景，我需要控制的是音频voice，通过点击类名为w的class="w"的p标签来控制该元素的播放暂停 只是那个人 发表于 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 小助理，如未能正确解答您的问题，请继续追问。 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也不行 只是那个人 发表于 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 小助理，如未能正确解答您的问题，请继续追问。
页:
[1]