Question

我有一个带有（图像）按钮和视频元素的页面。每当我单击按钮时，我都想加载并开始播放随机视频。但是，即使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>

Answer 1

也许您可以采用另一种方法来解决此问题，方法是将现有视频替换为全新的视频元素：

const db = require('./database.js').database

module.exports.selectMultiple = request => {
    //unimportant code
    return new Promise((resolve, reject) => {
        db.all(sql, (err, rows) => {
            if (err)
                reject(err)
            else {
                resolve('blah blah blah')
        })
    })
}

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

Answer 2

您也可以在不替换现有视频元素的情况下进行操作，如下所示。为此，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>

更改src后无法加载视频

2 个答案: