代码之家 › 专栏 › 技术社区 › sodiumnitrate

更改SRC后不加载视频

video html5 html javascript

sodiumnitrate · 技术社区 · 7 年前

我有一个带有(图像)按钮和视频元素的页面。每当我点击按钮时,我都想加载并开始播放随机视频。然而,即使 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>

2 回复 | 直到 7 年前

Dimitri Podborski 7 年前

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

Dacre Denny 7 年前

也许你可以用一个全新的视频元素替换现有的视频来解决这个问题:

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";
}

采用这种方法可以确保从先前的视频播放到下一个随机选择的视频没有“过时”状态(即播放状态、光标位置等)。

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

9 月前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

9 月前

Alex · 在轻量级中同时解构和不解构变量

9 月前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

9 月前

bairog · 从按属性筛选的对象数组字典中创建值数组

10 月前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

10 月前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

10 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

10 月前

user3472810 · Angular@Output/EventEmitter返回undefined

10 月前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

10 月前