Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

play() not working after setSrc() in Firefox #246

Closed
davatron5000 opened this Issue · 19 comments

8 participants

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

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
Owner

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
Owner

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
Owner

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
Owner

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>
@johndyer johndyer closed this
@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)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.