在javascript中替换HTML5视频src字符串并不取代视频。
我是一个javascript新手，构建了一个使用HTML5视频练习的简单页面。它基本上是一个全页循环视频和一个javascript计时器，跟踪和更新时间的网页。(当然，灵感来源于醉醺醺的罗恩·斯旺森)。这是页面的活版。小心:两个链接都播放声音。
我希望脚本选择七个视频中的一个在页面加载上播放。代码应该在1到7之间选择一个随机整数，为"media/“目录中的适当文件生成字符串，并用新的字符串替换视频<source>标记的src属性。
这一切似乎都是正确的:控制台中没有错误，没有本地错误，也没有上传到github页面的错误，当我检查Chrome工具栏中的<video>元素时，我可以看到代码正在正确地替换src字符串。但是页面似乎没有加载不同的视频！这是额外的加重，因为它是正确的工作几次前提交。我翻阅了历史，看了看发生了什么变化，但什么也找不到。
我来自Python，我怀疑有些东西我还没有得到，但我不知道到底是什么！
更新：在这个问题的帮助下解决了这个问题，方法是使用createElement和appendChild插入源标记，而不是更改querySelectorAll返回的NodeList中每个元素的属性。以下是相关的新代码：
function add_source(element, src, type) {
var source = document.createElement("source");
source.src = src;
source.type = type;
element.appendChild(source);
}
function main() {
var video_no = random_int(1,7);
var video_string_mpeg = "http://ecmendenhall.github.com/Infinite-Charleston/media/Trudy" + video_no + ".mp4";
var video_string_webm = "http://ecmendenhall.github.com/Infinite-Charleston/media/Trudy" + video_no + ".webm";
var videoplayer = document.querySelector(".videoplayer");
add_source(videoplayer, video_string_mpeg, "video/mp4");
add_source(videoplayer, video_string_mpeg, "video/webm");
get_seconds();
}这很好，但我不完全明白它为什么会起作用。我们仍然欢迎解释！
以下是javascript：
start = new Date();
start_time = start.getTime();
function get_seconds() {
var now = new Date();
var time_now = now.getTime();
var time_diff = time_now - start_time;
var seconds = time_diff/1000;
var timer_string = Math.round(seconds);
document.getElementById("timer").innerHTML = timer_string;
window.setTimeout("get_seconds();", 1000);
}
function random_int(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min; }
function main() {
var video_no = random_int(1,7);
var video_string_mpeg = "http://ecmendenhall.github.com/Infinite-Charleston/media/Trudy" + video_no + ".mp4";
var video_string_webm = "http://ecmendenhall.github.com/Infinite-Charleston/media/Trudy" + video_no + ".webm";
var sources = document.querySelectorAll(".videoplayer source");
sources.item(0).src = video_string_mpeg;
sources.item(1).src = video_string_webm;
get_seconds();
}以及HTML：
<html>
<link rel="stylesheet" href="charleston.css">
<script src="charleston.js" type="text/javascript">
</script>
<body onload="main();">
<video class="videoplayer" loop autoplay>
<source src="http://ecmendenhall.github.com/Infinite-Charleston/media/Trudy1.mp4" type="video/mp4" />
<source src="http://ecmendenhall.github.com/Infinite-Charleston/media/Trudy1.webm" type="video/webm" />
Christ on a cracker, Trudy! Update your web browser!
<audio loop autoplay>
<source src="http://ecmendenhall.github.com/Infinite-Charleston/media/charleston.mp3" type="audio/mpeg" />
<source src="http://ecmendenhall.github.com/Infinite-Charleston/media/charleston.ogg" type="audio/ogg" />
</audio>
</video>
<div class="timer_box">
<p>Hell's bells, Trudy! You've been dancing for <a id="timer">0</a> seconds.
<a href="https://twitter.com/share" class="twitter-share-button" data-count="none">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></p>
</div>
</body>
</html>我不认为CSS或媒体文件是问题所在，但如果您愿意，可以在项目储存库中看到它们。有一个可供使用的这里实时版本。(注:它播放声音)。正如你所看到的，除了选择不同的视频之外，它做的一切都是正确的。
回答 1
Stack Overflow用户
发布于 2012-03-29 16:49:02
我相信您也可以在您的视频对象上调用.load()来重新加载相应视频对象中定义的<source>。
“当您的侦听器函数被触发时，它应该更改媒体的src属性，然后调用load方法来加载新媒体，调用play方法来播放它，如清单3-4所示。”- 苹果。
https://stackoverflow.com/questions/9923573
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号