CODEWITHSUNDEEP
flashmediaelement.jsaac
Samuel Jack
Samuel Jack

Reputation: 33280

Why does mediaelement.js not play .m4a files when using Flash fallback?

I'm having a problem with mediaelement.js when playing files with an .m4a extension on browsers which don't natively support the AAC codec.

The player chrome loads up, and the first minute or so of audio is buffered, but the file never plays.

What's going on?

Upvotes: 2

Views: 2135

Answers (2)

Quinn Comendant
Quinn Comendant

Reputation: 10576

To expand on @samuel-jack's answer, here's how I solved the problem of Firefox unable to play AAC audio in a .m4a wrapper using mediaelement.js, in a way which also allows playing mp3.

  1. Edit mediaelement-and-player.js or mediaelement-and-player.min.js and add "audio/m4a" to the mejs.plugins.flash.types array.

  2. Ensure .mp4 files are served with the correct mime type; add this to your apache configuration:

    AddType audio/mp4 m4a

  3. Use HTML similar to the following. The $mime_type variable I'm using contains audio/mp4 for AAC mp4 audio files, and audio/mpeg for normal mp3 files.

    <audio controls preload="metadata">
    <source src="file.m4a" type="<?php echo $mime_type; ?>">
    <object width="100%" height="30" type="application/x-shockwave-flash" data="flashmediaelement.swf">
        <param name="movie" value="flashmediaelement.swf" />
        <param name="flashvars" value="controls=true&amp;file=file.m4a" />
    </object>
</audio>

  4. Load the mediaelement script, then and run it on a per-file basis. We need to selectively include the isvideo=true hack when the audio source type attribute contains audio/mp4.

    $('audio,video').each(function(i) {
    // Need to add the 'isvideo' hack for 'audio/mp4' media types.
    var plugin_vars = ($(this).children('source').attr('type').search('audio/mp4') > -1) ? 'isvideo=true' : '';
    $(this).mediaelementplayer({
        audioWidth: '100%',
        videoWidth: '100%',
        startVolume: 1.0,
        pluginVars: plugin_vars
    });
});

This works well for both .m4a and .mp3 files in Firefox 25 and 31, Chrome 36, and Safari 7 on OS X, as well as Firefox 31 on Windows 7.

Upvotes: 0

Samuel Jack
Samuel Jack

Reputation: 33280

This is a known issue with mediaelement.js. It's to do with the Flash plugin requiring AAC files to be played using the NetStream class rather than the Sound class.

There is a work-around, however: you can tell media element to treat the file as a video, then everything works as it should. Set pluginVars: 'isvideo=true' when initialising the player. E.g.

$('#player').mediaelementplayer({
            pluginVars: 'isvideo=true',
        });

You may also need to tell mediaelement that the Flash plugin is capable of handling the mime type audio/mp4 (for some reason it currently only handles audio/m4a). Find mejs.plugins.flash in mediaelement-and-player.js and add "audio/m4a".

Note that this will leave browsers which natively handle AAC files completely unaffected; it will only come into play when Flash fallback is required.

One other note: I've recently found that if this work around is applied indiscriminately, MP3 files may not play. So you'll need to detect when the file is MP4/M4A, and only apply it then.

Upvotes: 2

Related Questions