MediaElement.js setSrc 不适用于 FF、IE7-8 上的 Flash 回退

Question

我看过一些关于这个问题的讨论，但没有真正的答案。我已经成功地让 mediaelement.js 为我工作，只是它根本不允许我 setSrc() 进行 Flash 回退。经过这么多工作之后，这真是一个巨大的遗憾。

对于一些背景知识，我使用 mediaelement-and-player.js v2.1.9 并使用他们的播放器 API 通过 player.setSrc 更改媒体 src。我正在播放音频 MP3。

我在 FF Mac 中收到此错误：

this.media.setSrc 不是一个函数

并且在 IE8 Win 中出现此错误：

SCRIPT445：对象不支持此操作

我发现很难相信这没有经过充分测试，因为它似乎是其 API 的基础部分。我见过一些有关类似问题的其他问题，但同样没有真正的答案。

Answer 1

您需要将“flashmediaelement.swf”添加到您的代码中。

Answer 2

有同样的问题。通过添加非空 src 和 type="audio/mp3" 属性解决了这个问题：

<audio id="player" controls src="#" type="audio/mp3" preload="none"></audio>

这里建议使用 preload="none" ，因为如果没有它，该元素将向当前页面的 URL 发送额外的请求以尝试下载音频。

---

更新：找到了另一种方法，可以将零长度的WAV文件嵌入到src中，这样您就可以正常使用preload属性而不必担心如果用户在设置正常 src 之前单击播放按钮，将会发送不需要的请求。

<audio id="player" controls type="audio/mp3" src="data:audio/wav;base64,UklGRiQAAABXQVZFZm10IBAAAAABAAEARKwAAIhYAQACABAAZGF0YQAAAAA=">

不用担心 type 和 src 不兼容，因为根据 音频元素规范，type不是audio 根本没有标签（type 只是 source 标记的属性），此处放置它只是为了修复 MediaElement.js 行为。

Answer 3

我在 github 上回答了类似的问题。这是我的解决方案：

当初始化 mediaElement 播放器后过早调用 setSrc 方法时，就会发生这种情况。由于 flash 回退，swf（及其 api 方法）在成功事件触发之前将不可用。之后 setSrc 在 IE8 中工作正常。

我不想在成功处理程序中设置初始源。因此，我使用布尔变量来检查成功事件是否发生。在我的源设置方法中，每当布尔变量等于 false 时，我都会检查其值并使用递归性（使用 setTimeout 来防止过度杀伤）。这对我有用。

//create the tag
var video = $("<video>",{id:"videoElement",width:640,height:360}).appendTo('body');//jquery

var mediaElementInitialized = true 

//create the mediaelement
var mediaElement = new MediaElementPlayer("#videoElement",{
            /**
             * YOU MUST SET THE TYPE WHEN NO SRC IS PROVIDED AT INITIALISATION 
             * (This one is not very well documented.. If one leaves the type out, the success     event will never fire!!)
             **/
            type: ["video/mp4"],
            features: ['playpause','progress','current','duration','tracks','volume'],

            //more options here..

            success: function(mediaElement, domObject){
                mediaElementInitialized = true;
            },
            error: function(e){alert(e);}
            }
        );

var setSource = function(src){

    if(mediaElementInitialized == true){

         if(mediaElement){
            mediaElement.setSrc(src);
            mediaElement.play();
        }

    } else {
        //recursive.. ie8/flashplayer fallback fix..
        var self = this;
        setTimeout(function(){
            self.setSource(src);
        },100);
    }
}

Answer 4

var plugin = new MediaElementPlayer(#mplay_audio_p',
{
//...params...
});

var url="http://www.somesite.com/audiofile.mp3";

plugin.setSrc(url);
plugin.load();
plugin.play();