HTML and CSS Reference
In-Depth Information
Debugging and Discovering Browser Support
In the next couple of chapters, I'm going to cover some of the more advanced features for the
HTML5 media elements. Before I do, though, I wanted to demonstrate a technique you can
use to determine what each browser does or doesn't support on the media elements. This tech-
nique also demonstrates how you can debug your media applications in your favorite browser.
All browsers either have a built-in debugger, or have one that you can install. These debuggers
each have a way of exposing the properties, methods, and events supported on an HTML ele-
ment. All you need to do is obtain a reference to the media object instance.
To explore what's available for audio and video elements, add a video and audio element to a
web page, and then add a simple JavaScript object that gets a reference to both, as shown in
Example25.Asimplemethodforexploringabrowser'simplementationofthevideoandau-
dio elements
<!DOCTYPE html>
<head>
<title>Exploring the elements</title>
<meta charset="utf-8" />
<script>
window.onload=function() {
var videoobj = document.getElementById("videoobj");
var audioobj = document.getElementById("audioobj");
var test = 0;
}
</script>
</head>
<body>
<video id="videoobj" controls>
<source src="videofile.mp4" type="video/mp4" />
<source src="videofile.webm" type="video/webm" />
<track label="English subtitles" kind="subtitles" srclang="en"
src="subtitles.vtt" default />
</video>
<audio id="audioobj" controls>
<source src="audiofile.mp3" type="audio/mp3" />
<source src="audiofile.ogg" type="audio/ogg" />
</audio>
</body>
Open the page in a browser that supports a debugger, or has a debugger installed, and then
start the debugger. Set a break point on the following line of script:
