gpt4 book ai didi

javascript - 更改 src 后视频无法加载

转载 作者:行者123 更新时间:2023-11-30 09:18:20 25 4
gpt4 key购买 nike

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

最佳答案

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

关于javascript - 更改 src 后视频无法加载,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53439081/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com