MediaElement.js setSrc not working for flash fallbacks on FF, IE7-8

I've seen a few discussions about this, but no real answers. I've had a lot of success getting mediaelement.js working for me except that it simply will not let me setSrc() on flash fallbacks. This is a huge bummer after so much work.

For a little background I'm using mediaelement-and-player.js v2.1.9 and using their player's API to change the media src via player.setSrc. I'm playing audio MP3s.

I'm getting this error in FF Mac:

this.media.setSrc is not a function

And this error in IE8 Win:

SCRIPT445: Object doesn't 开发者_JS百科support this action

I find it hard to believe that this wasn't fully tested given that it seems a base part of their API. I've seen some other issues about similar problems but again, no real answers.

You would need to add "flashmediaelement.swf" to your code.

Had the same problem. Solved it by adding non-empty src and type="audio/mp3" attributes:

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

Presence of preload="none" is recommended here, because without it the element will send an additional request to a current page's URL in an attempt to download the audio.

Update: found an alternative way, zero-length WAV file can be embedded in src, thus you may use preload attribute normally and stop worrying about that an unneeded request will be sent if a user will click the play button before you set normal src.

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

Don't worry about type and src incompatibility, because, according to audio element specification, type isn't legal attribute of audio tag at all (type is only a source tag's attribute), here it's placed only to fix MediaElement.js behavior.

I answered a similar question on github. Here's my solution:

This occurs when the setSrc method is called too soon after initializing the mediaElement player. Due to the flash fallback the swf (and therefore its api methods) will not be available until the success event is fired. After that setSrc works fine in IE8..

I didn't want to set the initial source from within the success handler. Therefore I used a boolean var to check whether the success event had occurred. In my source setting method I check for its value and use recursiveness (with a setTimeout to prevent overkill) whenever the boolean var equals false.. Did the trick for me.

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

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

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

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