Play from another src if video can't play from src

Question

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">
</video>

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

Thanks in advance!

Answer 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>
</video>

Seehttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/video