在 javascript 中替换 HTML5 视频 src 字符串不会替换视频答案

【问题标题】：Replacing HTML5 video src strings in javascript does not replace video在 javascript 中替换 HTML5 视频 src 字符串不会替换视频
【发布时间】：2012-03-29 10:29:02
【问题描述】：

我是一个 javascript 新手，正在构建一个简单的页面来练习使用 HTML5 视频。它基本上是一个整页循环视频和一个 javascript 计时器，用于跟踪和更新页面上的时间。（当然，灵感来自Infinite Drunk Ron Swanson）。这是页面的live version。注意：两个链接都播放声音。

我希望脚本选择七个视频之一在页面加载时播放。代码应选择 1 到 7 之间的随机整数，生成字符串到“media/”目录中的相应文件，并将视频<source> 标签的src 属性替换为新字符串。

这一切似乎都正常工作：控制台中没有错误，本地或上传到 github-pages，当我检查 Chrome 开发人员工具栏中的 <video> 元素时，我可以看到代码是正确替换 src 字符串。但是页面似乎没有加载不同的视频！这是额外的加重，因为它在几个提交前正常工作。我已经回顾了历史以查看发生了什么变化，但我找不到任何东西。

我来自 Python，我怀疑有些东西我还没有得到，但我知道的不够多，无法弄清楚是什么！

更新：我已经在this question 的帮助下解决了这个问题，通过使用createElement 和appendChild 插入源标签而不是更改@ 中每个元素的属性987654332@ 由querySelectorAll 返回。以下是相关的新代码：

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 或媒体文件不是问题，但如果您愿意，可以在 project repository 中查看它们。实时版本可用here。（注意：它播放声音）。如您所见，除了选择不同的视频外，它一切正常。

【问题讨论】：

标签： javascript html html5-video

【解决方案1】：

我相信你也可以在你的视频对象上调用.load()来重新加载相应视频对象中定义的<source>。

“当你的监听函数被触发时，它应该改变媒体的 src 属性，然后调用 load 方法来加载新媒体，并调用 play 方法来播放它，如清单 3-4 所示。” - Apple

【讨论】：