How to dynamically change html5 video source?

Question

I'm using flowplayer to render live videos. On button click, I want to dynamically change the src (video url) to a different url. This needs to work well on most of the mobile devices (ios and Android). I have tried almost all the answers in this thread but nothing seems to work well on all devices - changing source on html5 video tag.

An answer by antonioj1015 works except that I don't see the default Play/Pause buttons on the player.

Here is my flowplayer container div looks like -

<div id="player" class="flowplayer">
    <video id="video"><source id="video_src" src="//mydomain.com/video.mp4" type="video/mp4">
    </video>
</div>

Javascript code looks like this -

document.getElementById('player').innerHTML = '<video id="video"><source src="'+newurl+'" type="video/mp4"></video>';
document.getElementById('video').load();
document.getElementById('video').play();

I have tried to replace the entire video tag. Also, tried to dynamically change the src but nothing seems to work. Any push in the right direction will be greatly appreciated. Thanks.

Answer 1

You can use src property.

document.getElementById('video').src = 'https://example.com/othervideo.mp4';
document.getElementById('video').load();
document.getElementById('video').play();

Read more on https://www.w3schools.com/tags/av_prop_src.asp

Answer 2

You can set flowplayer api to a global variable at the beginning

var myApi;
flowplayer(function (api, root) { myApi = api; });

Then on your button click, do:

    $("#yourbutton").on("click", function () {
       myApi.load({
       sources: [{ type: "video/mp4",
                   src:  newurl  }]
      });
   });