记录踩坑
直接放代码:
原理:
1.在Video 标签中绑定id
2. 获取id, 动态更换src 地址即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/index.css">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="top">
<h1>综合监测数据管理系统</h1>
</div>
<div class="body">
<div class="left">
</div>
<div class="main">
<div class="main-view">
<video muted autoplay loop id="showVideo">
<source src="video/1.mp4" type="">
</video>
<div class="change-video">
<div class="video-item">
<img src="image/v1.png" alt="" id="v1">
</div>
<div class="video-item">
<img src="image/v2.png" alt="" id="v2">
</div>
<div class="video-item">
<img src="image/v3.png" alt="" id="v3">
</div>
</div>
</div>
</div>
<div class="right">
</div>
</div>
</div>
<script>
// 获取点击变化的id
const v1 = document.querySelector("#v1")
const v2 = document.querySelector("#v2")
const v3 = document.querySelector("#v3")
// 指定 video 切换路径
var v1Url = "video/1.mp4"
var v2Url = "video/2.mp4"
var v3Url = "video/3.mp4"
// 通过监听事件变化,更换src, 执行play()
// id 要在 video中绑定,不能在source中绑定
v1.addEventListener("click",() => {
document.getElementById("showVideo").src = v1Url;
document.getElementById("showVideo").play()
})
v2.addEventListener("click",() => {
document.getElementById("showVideo").src = v2Url;
document.getElementById("showVideo").play()
})
v3.addEventListener("click",() => {
document.getElementById("showVideo").src = v3Url;
document.getElementById("showVideo").play()
})
</script>
</body>
</html>