成功改變視頻使用onclick按鈕的來源和跟蹤，但視頻仍然相同

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

當您更改<source>元素的src，它不會改變<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>