play() not working after setSrc() in Firefox

[davatron5000]

Thanks for MediaElement.js, it's wonderful.

A client of mine asked me to investigate adding a preroll to our MediaElement.js player. I hacked for a few hours and got something that works well in all browsers but Firefox (both FF6 and FF3.6).

http://jsbin.com/umutux

The video loads -> the src is changed to the preroll -> on an ended event, it changes the source to the original video and triggers a play() event. I've searched and found other MediaElement + Firefox issues and tried my own custom ended event, but to no avail.

Is this a problem with Firefox or with MediaElement.js?

[JacobFierro]

I've had very similar issues recently. In my case I'm creating a mutli-track audio player which, most obviously, needs to be able to easily switch between audio files.

The problem as I see it is not with play() but with setSrc(). Are you able to get setSrc to work in IE 7-8 as well? For me setSrc is only failing on the browsers using the flash fallback (and since i'm using mp3 that includes FF).

I suspect it's a MediaElement problem, but I have thus been unable to figure a way to fix it. My project needs to ship asap and as a matter of last resort I'm going to try completely redrawing the dom node and re-instantiating ME on track change for those browsers that are using the fallback.

I'd be very interested to know if setSrc is actually working for you in IE. I'm using the most current version of mejs (2.1.9)

[JacobFierro]

Update:

Redrawing the dom node seems to have worked for the most part, though it's still slightly buggy.

Here's a simplified version of things:
http://jsbin.com/odilex/edit#javascript,html

hope this might help

[johndyer]

I'll try to work on this for an upcoming release. I'm focusing on building in some iPad features and some things needed for a client, but I should be able to get back to general bug fixes in a week or so.

Thanks for the feedback!

[lukeholder]

I am having the same problem with firefox.

mp4 video playing and switching great with html5 video in chrome safari and ie9 - but firefox doesnt switch.

[johndyer]

Are you guys calling the load() method after setSrc():

player.setSrc('newfile.mp4');
player.load();
player.play();

[lukeholder]

yes i was. I got around the issue by rebuilding the DOM and reloading the player like the above link showed:

http://jsbin.com/odilex/edit#javascript,html

not optimal, but it works..

[davatron5000]

Yessir.

mediaElement.setSrc(originalVideo);
mediaElement.load();
mediaElement.play();

[JacobFierro]

John,

Thanks for looking into this. I haven't opened up my Windows VM, but I can tell you that .setSrc throws an error on FF 6.0.2.

Error msg: "this.media.setSrc is not a function", mediaelement-and-player.js v2.1.9 on line 1474.

(and yes, I was calling .load(), but that obviously did little when .setSrc was failing)

[lukeholder]

Might i suggest browser stack to test on different browsers for windows:

http://www.browserstack.com/

[johndyer]

Could one of you guys provide a complete example of this failing? In my tests, I can call setSrc and load just fine, but I'd really like to fix this for you.

[davatron5000]

In my example posted above, I'm specifically trying to setSrc within the ended event: http://jsbin.com/umutux Maybe that's more the problem (?)

[JacobFierro]

Here's the stripped out player from my client's site that uses just the setSrc method (i.e. no redrawing of the dom).

http://jacobfierro.com/mediaelement/

I'm calling setSrc in http://jacobfierro.com/mediaelement/js/views.js way at the bottom. Please let me know if you need any help.

[MatthewBergsma]

It seems something is causing the DOM to redraw the SWF in firefox when you run these calls and the flash player does not update it's src URL. If you turn on pluginDebugging, you can see the setSrc, load, and play calls being received by the SWF in other browsers (IE 8 for example) but mac firefox just does a SWF refresh and reloads the original src file.

In fact, just calling "player.pause()" and then "player.setSrc(" appears to wipe out the existing SWF and replace it.

[MatthewBergsma]

Well - I spoke too soon. I was moving around a parent div with jquery, and mac firefox will "refresh" an embedded SWF if you mess with it in the DOM at all. After removing my animations, the setSrc is working correctly.

I've run into this before years ago doing custom flash video player development, and it's been so long - I completely forgot about this use case :-)

John - a safety net may be to change the URL in the flashvars parameter in the DOM when a setSrc call is run... Of course this is quite an edge case in my instance.

[johndyer]

Matthew,
Unfortunately, any change to the parent node of a Flash Embed causes Firefox to reload the entire embed. It's a really cruddy part of Firefox that has been there since 1.0 and they just won't fix it.

[johndyer]

Here's some code that work well for me in Flash mode (tested Firefox 8 on Mac, and IE8 on PC)

<video width="640" height="360" src="video1.mp4" type="video/mp4" 
    controls="controls" preload="none"></video>

<script>
$('video').mediaelementplayer({
    success: function(media, node, player) {
        media.addEventListener('ended', function() {

            media.setSrc('video2.mp4');
            media.load();
            media.play();

        }, false);
    }
});
</script>

[AshishKhurana]

In my case "flashmediaelement.swf" was missing.

[mlhDevelopment]

I got the same error (in FF and Chrome). I left out the src attribute of the <audio> tag (since I was going to implement a playlist and change the source after user click), but this wasn't working. Setting src="#" appears to have worked so I'm going to use that and keep building.

[twentyfortysix]

hey I have the same problem here
http://martinkrejci.net/
On FF:
TypeError: this.media.setSrc is not a function ...n this.media.volume},setSrc:function(a){this.media.setSrc(a)},remove:function(){... mediael...ver=4.0 (line 27, col 16370)
if you try it live on the link above.. it will play a video but that is a source defined in HTML not served by Javascript player.setSrc(src);

what is super confusing to me is that I use the same code here
http://districtproductions.tv/wp/
..where it works fine . :{ so I don't get it ;/
(Chrome, Safari are Ok)