HTML5/JavaScript - 如何为视频源添加时间戳属性？

Question

在我真的很难找到答案之前，我从未使用过 HTML 或 JavaScript！我正在为当地俱乐部运营一个网站，该俱乐部使用在线网站构建器，所以到目前为止我还没有进行任何编码。

我想在其中一个页面上显示延时视频，该页面通过 FTP 每 30 分钟更新一次（每次更新时都会覆盖自身）。我的视频上传和播放正常，但是浏览器正在缓存视频，并且在页面刷新时不会重新加载它，因为文件名保持不变。我进行了大量研究，发现向视频 src 路径添加随机属性（例如时间戳）可能会解决问题（根据以下链接），但我无法弄清楚如何做到这一点。

Force browser to update cached HTML5 video object

由于它是一个在线网站构建器，添加代码的唯一方法是插入一个“HTML/Script”元素并将代码粘贴到那里，所以目前我有：

<video width="476" height="266" controls="" autoplay="">
<source src="http://mydomain.co.uk/Weather/today.mp4" 
new="" type="video/mp4"/>
Sorry, your browser does not support our time lapse video.
</video>

我的印象是我需要在其中添加一些 JavaScript 来添加属性，但作为 HTML/Java 的新手，我可以提供一些帮助！谢谢，乔纳森。

Answer 1

这将进入您创建的视频对象，并将一个唯一的字符串附加到视频源的末尾。

我确实为视频对象中的源添加了一个 ID，以便更轻松地使用 javascript 访问源对象。

var video = document.getElementById("vid");
var source = document.getElementById("vidsource");
var rndString = "?t=" + Date.now();
source.src = source.src + rndString;
video.load();

<video id="vid" width="476" height="266" controls="" autoplay="">
  <source id="vidsource" src="http://mydomain.co.uk/Weather/today.mp4" new="" type="video/mp4" />Sorry, your browser does not support our time lapse video.
</video>