Question

在我开始之前，我很抱歉，如果我属于重新发布。但是，在检查完前一个帖子后，我仍然没有得到答案。

我尝试使用onclick按钮更改视频源。但是，尽管来源发生了变化，但视频仍然相同。

<video width="560" height="320" controls="controls" preload="none">
  <source id="myVideo" src="/video1.mp4" type="video/mp4">
  <track id="mySubtitle" src="/Subtitle1.srt" kind="subtitles" srclang="id" label="Indonesian" default>
</video>

<button onclick="myFunction1()">Change Video 1</button>
<button onclick="myFunction2()">Change Video 2</button>

<script>
function myFunction1() {
document.getElementById("myVideo").src = "/video2.mp4";
document.getElementById("mySubtitle").src = "/Subtitle2.srt";
}
function myFunction2() {
document.getElementById("myVideo").src = "/video3.mp4";
document.getElementById("mySubtitle").src = "/Subtitle3.srt";
}
</script>

源已成功更改，但视频仍然相同。
有人有想法吗？

Answer 1

试试这个：

<script>
function myFunction1() {
 document.getElementById("myVideo").setAttribute("src", "/video2.mp4");//Set src attribute
 document.getElementById("mySubtitle").setAttribute("src", "/Subtitle2.srt");//Here too
}
function myFunction2() {
 document.getElementById("myVideo").setAttribute("src", "/video3.mp4");//And here
 document.getElementById("mySubtitle").setAttribute("src", "/Subtitle3.srt");//Same
}
</script>

这应该完美无缺。

Answer 2

当您更改src元素的<source>时，它不会更改<video>元素的src。您必须调用其load方法：

function myFunction1() {
  document.getElementById("myVideo").src = "http://media.w3.org/2010/05/bunny/movie.mp4";
//  document.getElementById("mySubtitle").src = "/Subtitle2.srt";
  document.querySelector('video').load();
}

<button onclick="myFunction1()">Change Video 1</button>

<video width="560" height="320" controls="controls" preload="none">
  <source id="myVideo" src="http://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4">
  <!--<track id="mySubtitle" src="/Subtitle1.srt" kind="subtitles" srclang="id" label="Indonesian" default>-->
</video>

成功改变来源＆amp;跟踪视频使用onclick按钮，但视频仍然相同

2 个答案: