更改src后如何重新加载视频

Question

大家好，我想制作一个脚本来重新加载视频的src，我写了一个代码来更改src，它正在工作，但在更改src后，没有发生任何事情，新的src不工作，所以我试着重新加载视频帧的src，但也不工作，这是脚本

<button type="button" onclick="myFunction1();">Click Me!</button>
<video id='hls-video' style="width: 100%; height: 100%;">
<source id="change-src" src='http://vtpii.net:8000/live/946108483118595/641391346746584/185.m3u8' title='480p' type='application/x-mpegURL'/>
</video>
<script>
var myFP = fluidPlayer('hls-video',{layoutControls:{autoPlay:true,allowTheatre: true}});   
function myFunction1() {
document.getElementById("change-src").src = "http://livecdnh2.tvanywhere.ae/hls/mbc1/index.m3u8";
document.getElementById("hls-video").reload();
}  
</script>

那么我如何在点击后重新加载并使新的src工作呢？谢谢

Answer 1

<video>标记没有reload()方法。您可以使用load()&play()方法组合以获得如下所需的行为：

var video = document.getElementById('hls-video');
var source = document.getElementById('change-src');
function myFunction1() {
video.pause()
source.setAttribute('src', 'https://www.w3schools.com/html/mov_bbb.mp4');
video.load();
video.play();
}

<button type="button" onclick="myFunction1();">Click Me!</button>
<video id='hls-video' style="width: 100%; height: 90vh;" controls>
<source id="change-src" src='https://www.w3schools.com/html/mov_bbb.mp4' title='480p' type='video/mp4'/>
</video>