Mixing HTML5 Video and Canvas - HTML5 Canvas - page 473

aregoingtousethe canPlayType() methodofthe video objecttotelluswhichtypeofaudio
file to load.

The canPlayType() method takes a single parameter, a MIME type. It returns a text string of
maybe , probably , or nothing (an empty string).

""" (nothing)

This is returned if the browser knows the type cannot be rendered.

maybe maybe

This is returned if the browser does not confidently know that the type can be displayed.

probably

This is returned if the browser knows the type can be displayed using an audio or video
element.

Wearegoingtousethesevaluestodetermine whichmediatypetoloadandplay.Forthesake
ofthisexercise, wewillassumethatboth maybe and probably equate to yes .Ifweencounter
either result with any of our three MIME types ( video/webm , video/mp4 , video/ogg ), we will
return the extension associated with that MIME type so that the sound file can be loaded.

Inthefollowingfunction, video representstheinstanceof HTMLVideoElement thatwearego-
ing to test. The returnExtension variable represents that valid extension for the first MIME
typefoundthathasthevalueof maybe or probably returnedfromthecallto canPlayType() :

function function supportedVideoFormat ( video ) {

var var returnExtension = "" ;

iif ( video . canPlayType ( "video/webm" ) == "probably" ||
video . canPlayType ( "video/webm" ) == "maybe" ) {
returnExtension = "webm" ;

} else else iif ( video . canPlayType ( "video/mp4" ) == "probably" ||

video . canPlayType ( "video/mp4" ) == "maybe" ) {
returnExtension = "mp4" ;

} else else iif ( video . canPlayType ( "video/ogg" ) == "probably" ||

video . canPlayType ( "video/ogg" ) == "maybe" ) {
returnExtension = "ogg" ;

}

return return returnExtension ;

}