Video
Provide alternatives for legacy platforms
Not all video formats are supported on all platforms. Check which formats are supported on the major platforms and make sure your video works in each of these.
Not all video formats are supported on all platforms. Check which formats are supported on the major platforms and make sure your video works in each of these.
Use
canPlayType()
to find out which video formats are supported. The method takes a string argument consistent of a
mime-type
and optional codecs and returns one of the following values:
| Return value | Description |
|---|---|
| (empty string) | The container and/or codec isn't supported. |
maybe
| The container and codec(s) might be supported, but the browser will need to download some video to check. |
probably
| The format appears to be supported. |
Here are some examples of
canPlayType()
arguments and return values when run in Chrome:
| Type | Response |
|---|---|
video/xyz
| (empty string) |
video/xyz; codecs="avc1.42E01E, mp4a.40.2"
| (empty string) |
video/xyz; codecs="nonsense, noise"
| (empty string) |
video/mp4; codecs="avc1.42E01E, mp4a.40.2"
|
probably
|
video/webm
|
maybe
|
video/webm; codecs="vp8, vorbis"
|
probably
|
There are lots of tools to help save the same video in different formats:
Want to know which video format was actually chosen by the browser?
In JavaScript, use the video’s
currentSrc
property to return the source used.
To see this in action, check out
this demo
: Chrome and Firefox choose
chrome.webm
(because that’s the first in the list of potential sources these browsers support) whereas Safari chooses
chrome.mp4
.
Updated on 2014-04-29
Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 3.0 License , and code samples are licensed under the Apache 2.0 License . For details, see our Site Policies .