How to detect supported video formats for the HTML5 video tag?

by

You can check codecs for different video types with HTMLVideoElement.prototype.canPlayType. There is also a great HTML5 feature detection library, Modernizr.

var testEl = document.createElement( "video" ),
    mpeg4, h264, ogg, webm;
if ( testEl.canPlayType ) {
    // Check for MPEG-4 support
    mpeg4 = "" !== testEl.canPlayType( 'video/mp4; codecs="mp4v.20.8"' );

    // Check for h264 support
    h264 = "" !== ( testEl.canPlayType( 'video/mp4; codecs="avc1.42E01E"' )
        || testEl.canPlayType( 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"' ) );

    // Check for Ogg support
    ogg = "" !== testEl.canPlayType( 'video/ogg; codecs="theora"' );

    // Check for Webm support
    webm = "" !== testEl.canPlayType( 'video/webm; codecs="vp8, vorbis"' );
}

More Related Contents:

  1. 5 stars and the golden 5 stars are not together (When browsing with Internet explorer)
  2. Get the size of the screen, current web page and browser window
  3. contenteditable, set caret at the end of the text (cross-browser)
  4. Browser detection versus feature detection
  5. Prevent HTML5 video from being downloaded (right-click saved)?
  6. OnChange event handler for radio button (INPUT type=”radio”) doesn’t work as one value
  7. Jquery load() only working in firefox?
  8. How to add/update an attribute to an HTML element using JavaScript?
  9. textarea character limit
  10. Programmatically play video with sound on Safari and Mobile Chrome
  11. Enter key press behaves like a Tab in Javascript
  12. Detect if HTML5 Video element is playing [duplicate]
  13. Is it possible to play HTML5 video in reverse?
  14. Dynamically using the first frame as poster in HTML5 video?
  15. How do I change the ID of a HTML element with JavaScript?
  16. IE8 alternative to window.scrollY?
  17. play pause html5 video javascript
  18. How to change the playing speed of videos in HTML5?
  19. HTML5 callbacks?
  20. how to make getUserMedia() work on all browsers
  21. Is there any problem with using HTML5’s “data-*” attributes for older browsers?
  22. How can I set preview of video file, selecting from input type=’file’
  23. How to make an HTML element editable cross-browser?
  24. HTML5 Video buffered attribute features
  25. Testing for multiple screens with javascript
  26. Checking if a html5 video is ready
  27. Use JavaScript to intercept all document link clicks
  28. HTML5 Video: Streaming Video with Blob URLs
  29. Cross-browser innerText for setting values
  30. How to reduce the length of a video using JavaScript? [closed]

Leave a Comment