js修改Video中src

记录踩坑直接放代码：原理：1.在Video 标签中绑定id2. 获取id，动态更换src 地址即可<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale

程序员海军

5981人浏览 · 2020-05-09 15:31:00

程序员海军 · 2020-05-09 15:31:00 发布

记录踩坑

直接放代码：

原理：

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>