3

I`m building a mobile-web app, and I am implementing Video & Audio tags. Apparently not all devices know to run all file formats. Modernizr knows to return to me the Codec, but how can I know if my file has this specific codec?

I can identify the file extension or mim-type, but than I`ll need to compare the codec with the file extension, and maintain an array with this data, and this seems like a sisyphic task.

What do you guys say? Any one knows on a good library that knows provide us with this information? Or maybe my approach is wrong and theres a better way to achive that.

Please not that Firefox OS for example display a msg to the user that specific file format isn't supported by the OS, but he doesn`t provide this msg when dealing with Audio files. Which means that I need to provide this feedback to the user, and I also prefer to do it in a customised visual way to my application.

An example: I got video.mp4. Modernizr returns Codec of H264. this two pieces of information don't relate. I cannot place fallbacks for my video to run in all video formats available. The app is a browser of a Cloud Files Hosting (like dropbox) and if the user uploaded a file which cannot run on FirefoxOS, than he must see understand why its file don`t run, and for that I need this library, instead of managing this compression by myself.

Some references:

Thank you.

Sam Hanley
  • 4,707
  • 7
  • 35
  • 63
neoswf
  • 4,730
  • 6
  • 39
  • 59

1 Answers1

2

If you have access to the mime type you could simply use the audio or video's canPlayType() method:

canPlay = (function(){
  var a = document.createElement('audio'),
      v = document.createElement('video');

  function canPlayAudio(type){
    var mime = 'audio/';
    if (a && a.canPlayType) {
      if (type.indexOf(mime) === -1) type = mime+type;
      return !!a.canPlayType(type) || !!a.canPlayType(type.replace(/^audio\/(x-)?(.+)$/, mime+'x-$2'))
    } return false
  }

  function canPlayVideo(type){
    var mime = 'video/';
    if (v && v.canPlayType) {
      if (type.indexOf(mime) === -1) type = mime+type;
      return !!v.canPlayType(type) || !!v.canPlayType(type.replace(/^video\/(x-)?(.+)$/, mime+'x-$2'))
    } return false
  }

  return {
    audio: canPlayAudio,
    video: canPlayVideo
  }
})();

Then you can perform the tests like this (note: including the "audio/" or "video/" part is optional):

canPlay.audio('audio/mpeg')  // true
canPlay.audio('m4a')         // true
canPlay.audio('wav')         // true
canPlay.audio('flac')        // false
canPlay.audio('audio/ogg')   // true

canPlay.video('video/mpeg')  // false
canPlay.video('video/mp4')   // true
canPlay.video('m4v')         // true
canPlay.video('video/webm')  // true
canPlay.video('avi')         // false
idbehold
  • 16,833
  • 5
  • 47
  • 74
  • Thank you @idbehold for this great direction. In order to get Probably I must pass the codec. Any idea how can I achieve that? – neoswf Aug 06 '13 at 16:38
  • Man- do you have an answer for me regarding Codec recognition, so I`ll be truly able to fully award you with my bounty? – neoswf Aug 12 '13 at 14:02
  • @NeoSwf I don't believe there's a programatic way to deal with the codecs. If you know of some mime types that require the codec be included I can attempt to add specific checks for them. Just let me know what they are. – idbehold Aug 12 '13 at 14:37
  • I already do this check against extensions manually, in order to reach probably. Thank you man. I guess there isnt – neoswf Aug 12 '13 at 18:10