mediaelement.js - 如果第一个视频源不可用，让 MediaElement.js “翻转”到第二个视频源

Question

我们的应用程序正在生成这个标记：

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

我们正在使用 MediaElement.js（版本 2.10.0）并希望播放器先尝试播放来自 unpredicatablesite.com 的源，然后如果未找到第一个，则滚动到来自 predicatablesite.com 的源。

有趣的是，在单独使用 HTML5 视频标签时滚动到下一个源似乎有效，但不适用于 MediaElement.js。我们有哪些选择才能让它发挥作用？播放器实例化上的错误：function(){} 似乎不会触发源 404 错误，因此该计划不起作用。

Answer 1

您可以检查第一个源的状态，如果 200（这基本上意味着服务器上存在该文件），您可以动态分配视频源。如果视频不存在，则将视频指定为第二个来源。

    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(); }
     });