更改 src 后视频无法加载答案

【问题标题】：Video doesn't load after changing src更改 src 后视频无法加载
【发布时间】：2018-11-22 23:33:22
【问题描述】：

我有一个带有（图像）按钮和视频元素的页面。每当我单击按钮时，我都想加载并开始播放随机视频。然而，即使src 被正确设置为随机文件，视频播放器也不会改变。可能是什么问题呢？代码如下：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Test</title>
    </head>
    <body>
        <div id="all">
            <div id="video-container">
                <video width="500" controls>
                    <source id="vid" src="videos/1.mp4" type="video/mp4">
                    Your browser does not support HTML5 video.
                </video>
            </div>
            <div id="buton">
                <img src="img/buton.png" onclick="swapVid()">
            </div>
        </div>
        <script type="text/javascript">
            function swapVid() {
                console.log("videos/"+Math.round(Math.random() * 3).toString() + ".mp4")
                document.getElementById("vid").setAttribute("src", "videos/"+Math.round(Math.random() * 3).toString() + ".mp4")
                console.log(document.getElementById("vid").getAttribute("src"))
            }
        </script>
    </body>
</html>

【问题讨论】：

为什么不完全替换<video />元素？
您是否尝试过解决方案：stackoverflow.com/questions/12151606/…？

标签： javascript html video

【解决方案1】：

您也可以在不替换现有视频元素的情况下执行此操作，如下所示。为此，id="vid" 应该是 <video> 元素的属性。我想这就是你试图做的：

<div id="all">
    <div id="video-container">
        <video width="500" controls id="vid" src="videos/1.mp4">
            Your browser does not support HTML5 video.
        </video>
    </div>
        <div id="buton">
              <img src="img/buton.png" onclick="swapVid()">
        </div>
    </div>
<script type="text/javascript">
    function swapVid() {
        var nextVideo = "videos/" + Math.round(Math.random() * 3).toString() + ".mp4";
        document.getElementById("vid").setAttribute("src", nextVideo);
        console.log(document.getElementById("vid").getAttribute("src"));
}
</script>

【讨论】：

【解决方案2】：

也许您可以采取不同的方法来解决这个问题，将现有视频替换为全新的视频元素：

function swapVid() {

    var video = document.getElementById('vid');
    if(video) { video.remove(); }

    video = document.createElement('video');
    video.setAttribute('id', 'vid'); 
    video.width = 500;
    video.src = "videos/"+ parseInt(Math.random() * 3) + ".mp4";
}

采用这种方法可确保之前视频播放的“陈旧”状态（即播放状态、光标位置等）不会延续到下一个随机选择的视频。

【讨论】：