Add audio and video to your webpage

Adding audio and video to your webpages is easier using HTML5. Native audio and video support in modern browsers let you add, style, and program media elements with no additional software.

In this section

Topic	Description
Add an audio player to your webpage	By using HTML5, you can add a music player to your webpage without requiring a third-party plug-in or add-on.
How to use HTML5 to play video files on your webpage	Using HTML5 video, you can add and control video content on your webpages, without requiring external controls or plug-ins.
Make your videos accessible with Timed Text Tracks	As a companion to the HTML5 video element, the Timed Text track API provides the tools to add accessibility, translated transcripts, or extended content to your videos.

Introduction

Traditionally, adding media to your webpage involved choosing from many schemes to add sound and video. Much of this media support requires additional software that need frequent updates, are sometimes difficult to program, and can be limited in how they integrate into your page. HTML5 native audio and video support can take the pain out of adding multimedia.

The HTML5 spec outlines audio and video elements with associated properties and methods that can be used as any other element in a page. As browser support improves, and the spec matures, we can create pages with more compelling content. For example, by using multiple audio elements, your page can play a song with multiple instruments on separate audio tracks.

When you add a video element to your page, you can display a placeholder image, style the element using Cascading Style Sheets (CSS), and choose between native controls or creating your own. Methods, events, and properties let you start and stop playback, seek, change content, or switch between multiple audio tracks.

Using the track element, closed captioning can be added to your videos as easily as creating and specifying a simple text file. The video element handles all the synchronizing and display. If you want to display captions yourself, APIs let you do that as well from script.

As you work through HTML5 audio and video scripting, you'll find that the two share many of the same methods and properties. After you know how to write an event that fires when your audio starts and stops, you can reuse that code in your video scripts.

The following links will help you dig into HTML5 audio and video and start dazzling your website's audience.

Be inspired

When you have the basics down, check out these creative articles featuring in-depth info on performance, best practices, and doing more with HTML5 audio and video.

Unlocking the Power of HTML5 audio	Starts with a quick overview on adding and initializing audio elements on your page. Next, learn the different ways of pre-loading content and the effects on performance. Looping your audio content, and synchronizing multiple audio tracks, is demonstrated with a multi-track music example. Finally, real sites are featured that use the HTML5 audio element in creative and inspiring ways.
Native Audio with HTML5	Covers the compatibility of the HTML5 audio element and APIs across the major browsers. You'll also learn how to use multiple codec support, setting mime types, and how to create a fallback when your page loads in a browser that doesn't support HTML5 audio.
Make your HTML5 video play on mobile devices	Shows how to take your show on the road. The discussion shows both HTML5 video and other alternatives for compatibility. The author also points out "gotchas" that can sometimes trip even seasoned programmers.
HTML5 Video Caption Maker	Create timed text files in both Web Video Text Track (WebVTT) and Timed Text Markup Language (TTML) formats easily with this tool.

See code in action

Here are cool demos that show what you can do with HTML5 audio and video. Use the F12 developer tools and the script tab to see the code behind the demos. For more information about F12 tools, see How to use F12 Developer Tools to Debug your Webpages

IE10 Video Captioning	Demonstrates how to add closed captioning to your HTML5 videos by using the <track> element.
IE Beatz	A fun demo for drummers and wannabe drummers that shows how to use multiple audio elements to layer sounds.
HTML5 Audio Player + XML Playlist	This demo combines HTML5 audio with native XML for the play list and Scalable Vector Graphics (SVG) for the controls.