CODEWITHSUNDEEP
javascriptvideo
abdo zaki
abdo zaki

Reputation: 41

how can i make the video reload after changing the src?

hello everyone i want to make a script to reload a src of video and i write a code to change the src and it's working but after changing the src nothing happend the new src did't work so i tried to reload the src of video frame but didn't work too and this is the script 

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

so how can i reload and make the new src working after click and thankyou

Upvotes: 3

Views: 15142

Answers (1)

palaѕн
palaѕн

Reputation: 73906

<video> tag has no reload() method. You can use load() & play() methods in combination to get the desired behaviour like this:

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>

Upvotes: 12

Related Questions