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 technique 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 element. 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 Example 25.
Example 25. A simple method for exploring a browser’s implementation of the video and audio 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" ...Get HTML5 Media now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
