Question

Our app is generating this markup:

<video id='player' width='512' preload='none' controls='controls'>
  <source src='http://unpredictablesite.com/notfound.mp4' type='video/mp4' />
  <source src='http://predictablesite.com/exists.mp4' type='video/mp4' />
</video>

We are using MediaElement.js (ver 2.10.0) and want the player to try playing the source from unpredicatablesite.com first, then roll over to the source from predicatablesite.com if the first one isn’t found.

Interestingly, rolling over to the next source seems to work when using the HTML5 video tag alone, but not with MediaElement.js. What options do we have to get this to work? The error: function(){} on player instantiation doesn’t seem to trigger on source 404 errors, so that plan didn’t work.

Answer 1

You could check for the first source’s status and if 200 (that essentially means that file exists on the server) you could assign the video souce all dynamically.
In case the video does not exist, then assign video the second source.

    var http = jQuery.ajax({
        type:"HEAD",
        url: $('source:first').attr('src'),
        async: false
      });


  var vidsrc;

  if ( http.status == 200 ) vidsrc = $('source:first').attr('src');
  else $('source:eq(1)').attr('src'); 


  var myvid = new MediaElementPlayer('#player', {
     translationSelector: true,
     success: function (mediaElement) {

        var sources = [{ src: vidsrc, type: 'video/mp3' }];

        mediaElement.setSrc(sources);
        mediaElement.pause();
        mediaElement.load(); }
     });