Solution 1 :

By putting multiple sources for your video, if the first fails to load, it will automatically play the next as below:

<video controls>
  <source src="myVideo.mp4" type="video/mp4">
  <source src="myVideo.webm" type="video/webm">
  <p>Your browser doesn't support HTML5 video. Here is
     a <a href="myVideo.mp4">link to the video</a> instead.</p>


Problem :

I want to automatically play video from another source if original source is not working.

Example. I have it –

<video id='screen' poster='loading.gif' autoplay>
<source id='stream' src="flowers.mp4" type="application/x-mpegURL">

I want to change it’s src when the first video is unable to play. How to do that?

Thanks in advance!


Comment posted by Muhammad Masud Ibn Aadam

Thank you so much! You are amazing!