Search code examples
javascripthtmljqueryhtml5-videosrc

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

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!

Solution

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

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