更改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>