HTML5 and audio-tag: redirect links not including file extension fail to load in FF/Chromium

4
votes

I have an annoying problem regarding the <audio> tag and FF/Chromium as media won't be played back when I would expect it to. Opera seems to handle it correctly.

We have audio media to be played back using the corresponding HTML5 <audio> tag. The <source> tag includes media in an audio-only OGG container. However, the file-extension ogg is not in the src-attribute, so src-links look like http://localhost:1234/a/b/cdefg/Xyz (Restful API using redirection to get the actual media file).

The following code is the part of the web page that should display the HTML5 player:

    <div class="mainContent">
    <audio id="aud1" height="360" width="640" autoplay="false" controls="controls" tabindex="0">
    <source type="audio/ogg" src="http://localhost:1234/a/b/cdefg/Xyz"></source>
    Your browser does not support HTML5.
    </audio>
    <div class="divider"></div>
    <a class="homeLink" href="/index.html">Take me back to the Homepage</a>
    </div>

The media being played back is definitely a audio-only OGG file.

I have tested this code on Ubuntu 10.04 FF5.0, Chromium 12.0.742.91 (87961) and Opera 11.50 with the following results:

  1. FF: doesn't play back
  2. Chromium: doesn't play back
  3. Opera: OK

I've integrated a small script to display different attributes of the HTMLMediaElement (attributes: networkState, readyState, see) yielding the following results:

  1. FF => networkState: NETWORK_LOADED (media source finished loading), readyState: HAVE_NOTHING (no media available for playback)
  2. Chromium => networkState: NETWORK_LOADED (media source finished loading), readyState: HAVE_NOTHING (no media available for playback)
  3. Opera => networkState: NETWORK_IDLE, readyState: HAVE_ENOUGH_DATA

(Note that the descriptions for the different states are from the Safari Dev site: http://developer.apple.com/library/safari/#documentation/AudioVideo/Reference/HTMLMediaElementClassReference/HTMLMediaElement/HTMLMediaElement.html)

If I insert a src which directly points to an audio-only OGG file (like http://en.wikipedia.org/wiki/File:Tromboon-sample.ogg), then it works as expected. It seems as if FF and Chromium seems to have issues with links not including the final file name?

Does anyone have an idea or hint about this?

Cheers, Chris

1
htmlfirefoxgoogle-chromeaudioogg
I've found the solution: it was actually a MIME type issue where we didn't set the correct MIME type when handling audio files. – Christof
so what was the correction you made to the MIME type? I have the same issue – rewolf
When I check the network console in Chrome, it comes up with a failure for the redirection, but it works in other browsers(opera, ff, safari). (tested on mac os) – zuo

1 Answers

1
votes

I know you already fixed it, but make sure you didnt miss any MIME types:

HTML5 <video>

.ogv
video/ogg

.webm
video/webm

HTML5 <audio>

.oga
audio/ogg

.mp3
audio/mp3

HTML5 <video> <audio>

.mp4
video/mp4

.ogg
application/ogg