HTML and CSS Reference
In-Depth Information
This code iterates through all of the
source
elements and displays a pop-up indicating if the type is
supported. Save your changes and try running this in Opera. You should see the results shown in Figures
8-13
and
8-14
.
Figure 8-13.
The canPlayType() results for audio/ogg
Figure 8-14.
The canPlayType() results for audio/mp3
How do you like that? You ask a yes or no question and get back a “maybe” and no response. Well, as it turns
out, the
canPlayType()
function does not return either “no” or “yes”. Instead it returns either “maybe”, “probably”,
or a blank string. The blank string can be interpreted as a “no”. Let's talk about “maybe” and “probably”.
The source file is a container that provides metadata about the media in addition to the actual data.
Specifying a Mime type like audio/ogg merely indicates the type of container but doesn't explicitly state how
the data is encoded (what codec is used). If the browser supports that container type,
canPlayType()
returns
“maybe”. There's no evidence to indicate it is not supported but can't tell for certain that it is. If the container type
is not supported, like audio/mp3, a blank string is returned (meaning it is not supported).
■
A blank string is used to indicate not supported because in JavaScript, a blank string is a
falsy
value
whereas “no” is a
truthy
value. So you can code
if (canPlayType(type))
and only “maybe” and “probably” results
will be selected.
Note
If you also specify the codec value and the codec is supported then you'll get a "probably" returned. Change
the type attribute on the first source element to this. (Again, watch the single- and double-quotes as you did
earlier.)
type='audio/ogg; codecs="vorbis"'
