search

etianen / html5media

Enables <video> and <audio> tags in all major browsers.
http://html5media.info/
GNU General Public License v3.0
1.28k stars 384 forks source link

Not working on Firefox 23/24 #43

Closed christopherdbull closed 10 years ago

christopherdbull commented 10 years ago

screen shot 2013-10-18 at 3 50 08 pm

I have a file embedded in a page but in FF it looks like this. The page appears to try and load flowplayer, but it just renders the blank box, instead of an actual player. This is using v. 1.1.6 and the behaviour is the same in both versions of FF. The file is an mp3, and it works as expected in chrome and safari. Just wondering if i've missed something:

this is my haml to include in the template: %audio{:src => @song.song_file.expiring_url(600), :controls => true, :preload => true}

etianen commented 10 years ago

It could be a lot of things, such as adblock, a bad version of Flash installed, or something else. If you provide a URL that shows the problem, I'd be happy to look into it.

On 18 October 2013 03:55, Christopher Bull notifications@github.com wrote:

[image: screen shot 2013-10-18 at 3 50 08 pm]https://f.cloud.github.com/assets/392904/1357697/2a6bf198-37a0-11e3-9eab-8dc98163974a.png

I have a file embedded in a page but in FF it looks like this. The page appears to try and load flowplayer, but it just renders the blank box, instead of an actual player. This is using v. 1.1.6 and the behaviour is the same in both versions of FF. The file is an mp3, and it works as expected in chrome and safari. Just wondering if i've missed something:

this is my haml to include in the template: %audio{:src => @song.song_file.expiring_url(600), :controls => true, :preload => true}

— Reply to this email directly or view it on GitHubhttps://github.com/etianen/html5media/issues/43 .

christopherdbull commented 10 years ago

Sure thing: http://songcatcher.co/songs/af99c080-c661-4376-9fff-01950e795878

Looking into it, I actually think its a cors problem as the audio comes from s3. Was going to close the issue due to that, I hadn't run into this before and didn't realise ff took cors that seriously.

Sent from my iPad

On 18/10/2013, at 9:29 pm, Dave Hall notifications@github.com wrote:

It could be a lot of things, such as adblock, a bad version of Flash installed, or something else. If you provide a URL that shows the problem, I'd be happy to look into it.

On 18 October 2013 03:55, Christopher Bull notifications@github.com wrote:

[image: screen shot 2013-10-18 at 3 50 08 pm]https://f.cloud.github.com/assets/392904/1357697/2a6bf198-37a0-11e3-9eab-8dc98163974a.png

I have a file embedded in a page but in FF it looks like this. The page appears to try and load flowplayer, but it just renders the blank box, instead of an actual player. This is using v. 1.1.6 and the behaviour is the same in both versions of FF. The file is an mp3, and it works as expected in chrome and safari. Just wondering if i've missed something:

this is my haml to include in the template: %audio{:src => @song.song_file.expiring_url(600), :controls => true, :preload => true}

— Reply to this email directly or view it on GitHubhttps://github.com/etianen/html5media/issues/43 .

— Reply to this email directly or view it on GitHub.

etianen commented 10 years ago

It's Flash that's taking CORs seriously, rather than Firefox.

I think you can get around this by uploading a permissive crossdomain.xml file into the root of your bucket.

On 18 October 2013 09:53, Christopher Bull notifications@github.com wrote:

Sure thing: http://songcatcher.co/songs/af99c080-c661-4376-9fff-01950e795878

Looking into it, I actually think its a cors problem as the audio comes from s3. Was going to close the issue due to that, I hadn't run into this before and didn't realise ff took cors that seriously.

Sent from my iPad

On 18/10/2013, at 9:29 pm, Dave Hall notifications@github.com wrote:

It could be a lot of things, such as adblock, a bad version of Flash installed, or something else. If you provide a URL that shows the problem, I'd be happy to look into it.

On 18 October 2013 03:55, Christopher Bull notifications@github.com wrote:

[image: screen shot 2013-10-18 at 3 50 08 pm]< https://f.cloud.github.com/assets/392904/1357697/2a6bf198-37a0-11e3-9eab-8dc98163974a.png>

I have a file embedded in a page but in FF it looks like this. The page appears to try and load flowplayer, but it just renders the blank box, instead of an actual player. This is using v. 1.1.6 and the behaviour is the same in both versions of FF. The file is an mp3, and it works as expected in chrome and safari. Just wondering if i've missed something:

this is my haml to include in the template: %audio{:src => @song.song_file.expiring_url(600), :controls => true, :preload => true}

— Reply to this email directly or view it on GitHub< https://github.com/etianen/html5media/issues/43> .

— Reply to this email directly or view it on GitHub.

— Reply to this email directly or view it on GitHubhttps://github.com/etianen/html5media/issues/43#issuecomment-26580623 .

christopherdbull commented 10 years ago

I've added a cors config to the bucket but it still won't load in FF.

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>Content-*</AllowedHeader>
        <AllowedHeader>Host</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

I should've said this earlier, but FF reports this in the console: [12:38:55.798] HTTP "Content-Type" of "audio/mp3" is not supported. Load of media resource *long s3 url* failed. @ http://songcatcher.co/songs/af99c080-c661-4376-9fff-01950e795878

etianen commented 10 years ago

That FF error message can be ignored. That just means the flash player was pulled in to fix it.

A crossdomain XML files isn't a cors configuration. It's actually a file called crossdomain.xml, uploaded to the root of the bucket. It's a Flash standard for cross domain requests that came out before HTML-style cors. On 19 Oct 2013 00:46, "Christopher Bull" notifications@github.com wrote:

I've added a cors config to the bucket but it still won't load in FF.

<?xml version="1.0" encoding="UTF-8"?>

_ GET 3000 Content-_ Host

I should've said this earlier, but FF reports this in the console: [12:38:55.798] HTTP "Content-Type" of "audio/mp3" is not supported. Load of media resource long s3 url failed. @ http://songcatcher.co/songs/af99c080-c661-4376-9fff-01950e795878

— Reply to this email directly or view it on GitHubhttps://github.com/etianen/html5media/issues/43#issuecomment-26637950 .

christopherdbull commented 10 years ago

Sorry, I've never had to do much with flash streaming before so this is all new to me, so I apologise for taking so long to get this right. I've added this file https://s3-us-west-1.amazonaws.com/com.songcatcher.songs/crossdomain.xml, but the file still won't play, do I need to do anything else?

christopherdbull commented 10 years ago

So I've done a bit more digging and now I'm getting some very strange behaviour: http://jsfiddle.net/zyuKW/ in this fiddle the file is just a public one hosted on s3. Amazon has set the mime type as audio/mpeg and when I first set up the fiddle it worked fine, since then however, running it a few times, it now just renders the black player again (in firefox). I've also added a crossdomain.xml but flowplayer doesn't seem to care about such things.

christopherdbull commented 10 years ago

So, I've found out even more. This only happens with Amazon s3 Query String Auth'd urls. I'm guessing it could be an encoding thing with flowplayer? Have you come across this before?

christopherdbull commented 10 years ago

The interesting thing is, where flowplayer stops: If it's a normal url it loads the flowplayer.control and flowplayer.audio if it's one with Query auth (which is correctly escaped btw) then it just hangs there, but I can't see any debug data, cos flash I guess.

Sorry for being such a pain btw.

etianen commented 10 years ago

Oh, bollox. That's a bug in the html5media.js code. It's not parsing the query strings off the URLs correctly.

In my defence, I wrote that code a long time ago! I'm just surprised that nobody else has picked up on this before! :O

I'll have a patch out in an hour.

On 21 October 2013 06:49, Christopher Bull notifications@github.com wrote:

The interesting thing is, where flowplayer stops: If it's a normal url it loads the flowplayer.control and flowplayer.audio if it's one with Query auth (which is correctly escaped btw) then it just hangs there, but I can't see any debug data, cos flash I guess.

Sorry for being such a pain btw.

— Reply to this email directly or view it on GitHubhttps://github.com/etianen/html5media/issues/43#issuecomment-26694152 .

etianen commented 10 years ago

I've attached a provisional 1.1.7 version of the script.

Could you test your player against this modified code, and let me know if it's parsing your URLs correctly?

(I've tested it against all the URL formats I can think of, but testing it in the wild would be good before performing an actual release).

On 21 October 2013 09:45, Dave Hall dave@etianen.com wrote:

Oh, bollox. That's a bug in the html5media.js code. It's not parsing the query strings off the URLs correctly.

In my defence, I wrote that code a long time ago! I'm just surprised that nobody else has picked up on this before! :O

I'll have a patch out in an hour.

On 21 October 2013 06:49, Christopher Bull notifications@github.comwrote:

The interesting thing is, where flowplayer stops: If it's a normal url it loads the flowplayer.control and flowplayer.audio if it's one with Query auth (which is correctly escaped btw) then it just hangs there, but I can't see any debug data, cos flash I guess.

Sorry for being such a pain btw.

— Reply to this email directly or view it on GitHubhttps://github.com/etianen/html5media/issues/43#issuecomment-26694152 .

etianen commented 10 years ago

Ah, no, that's not going to work. The fallback for a failed URL parse would still assume mp3.

Looking at your URL, I think it might still be the crossdomain.xml file. It needs to be located at the root of the domain, which means you need to use the subdomain-style calling format.

In other words, a URL like this:

http://s3-us-west-1.amazonaws.com/com.songcatcher.songs/01%20Intro.mp3

Needs to become a URL like this:

http://com.songcatcher.songs.s3-us-west-1.amazonaws.com/01%20Intro.mp3

On 21 October 2013 10:16, Dave Hall dave@etianen.com wrote:

I've attached a provisional 1.1.7 version of the script.

Could you test your player against this modified code, and let me know if it's parsing your URLs correctly?

(I've tested it against all the URL formats I can think of, but testing it in the wild would be good before performing an actual release).

On 21 October 2013 09:45, Dave Hall dave@etianen.com wrote:

Oh, bollox. That's a bug in the html5media.js code. It's not parsing the query strings off the URLs correctly.

In my defence, I wrote that code a long time ago! I'm just surprised that nobody else has picked up on this before! :O

I'll have a patch out in an hour.

On 21 October 2013 06:49, Christopher Bull notifications@github.comwrote:

The interesting thing is, where flowplayer stops: If it's a normal url it loads the flowplayer.control and flowplayer.audio if it's one with Query auth (which is correctly escaped btw) then it just hangs there, but I can't see any debug data, cos flash I guess.

Sorry for being such a pain btw.

— Reply to this email directly or view it on GitHubhttps://github.com/etianen/html5media/issues/43#issuecomment-26694152 .

christopherdbull commented 10 years ago

Is there a way I can provide a path to a crossdomain.xml file? s3 can't do https over domain style urls.

etianen commented 10 years ago

Nope, unfortunately not. It's a problem with Flash's cross domain request implementation.

On 21 October 2013 23:26, Christopher Bull notifications@github.com wrote:

Is there a way I can provide a path to a crossdomain.xml file? s3 can't do https over domain style urls.

— Reply to this email directly or view it on GitHubhttps://github.com/etianen/html5media/issues/43#issuecomment-26762484 .

etianen commented 10 years ago

I've just updated html5media to use the new 1.1.7 URL parsing code.