html 通过点击按钮在同一页面相同位置切换视频

怎么在html 通过点击按钮在同一页面相同位置切换视频？弄了一天了，希望有懂的朋友解答一下。


```javascript

<!DOCTYPE html>
<html>
<head>
    <title>切换视频示例</title>
</head>
<body>
    <h1>切换视频示例</h1>

    <!-- 第一个视频 -->
    <video id="video1" width="640" height="360" controls>
        <source src="video1.mp4" type="video/mp4">
        Your browser does not support the video tag.
    </video>

    <!-- 第二个视频 -->
    <video id="video2" width="640" height="360" style="display:none" controls>
        <source src="video2.mp4" type="video/mp4">
        Your browser does not support the video tag.
    </video>

    <!-- 切换视频的按钮 -->
    <button onclick="toggleVideo()">切换视频</button>

    <script type="text/javascript">
        var video1 = document.getElementById("video1");
        var video2 = document.getElementById("video2");

        function toggleVideo() {
            if (video1.style.display === "none") {
                video1.style.display = "block";
                video2.style.display = "none";
            } else {
                video1.style.display = "none";
                video2.style.display = "block";
            }
        }
    </script>
</body>
</html>

```