"audio" and "video" Elements

This section provides an tutorial example of using 'audio' and 'video' elements in HTML documents to embed audio and video media data.

"audio" and "video" elements are added in HTML5 standard to allow us to embed external audio and video media data into HTML document.

Here are some general rules about "audio" and "video" elements:

1. "audio" elements are used to embed an external audio media data as phrasing content.

2. "video" elements are used to embed an external video media data as phrasing content.

3. "src" attribute is supported in both "audio" and "video" elements to specify the URL where the external media data is located.

4. "controls" attribute is supported in both "audio" and "video" elements to turn on the control bar with play/pause and other buttons.

5. For audio media, 3 data formats are supported currently: MP3, Wav, and Ogg.

6. For video media, 3 data formats are supported currently: MP4, WebM, and Ogg.

7. "width" and "height" attribute are supported in "video" elements to specify the size of the display area where the video media will be played.

Here is a good example of using "audio" and "video" elements in HTML documents:

<!DOCTYPE html>
<!-- HTML5_audio_and_video_Example.html
 - Copyright (c) 2014 HerongYang.com. All Rights Reserved.
-->
<html>
<head>
<title>HTML5 audio and video Example</title>
</head>
<body>

<p>Here is a sample audio for you to play:
<audio src="Audio_Sample.mp3" controls="controls">
Too bad, your browser does not support "audio" elements!
</audio>
</p>

<p>Here is a sample video for you to play:
<video src="Video_Sample.mp4" width="300" height="240"
controls="controls">
Too bad, your browser does not support "video" elements!
</video>
</p>

<p>Click the play icon on the control bar to enjoy them.
</p>

</body>
</html>

When the above HTML document is viewed in a Web browser, you will see something like this:

HTML5 audio and video Example
HTML5 audio and video Example

Table of Contents

 About This Book

 Introduction of HTML

Introduction of HTML5 Features

 What Is HTML5

 Differences between HTML5 and HTML 4

 HTML5 DOCTYPE Declaration

 Adding Inline SVG Image in HTML5 Documents

 Adding MathML Formula in HTML5 Documents

 "article" and "section" Elements

 "header" and "footer" Elements

 "nav" and "aside" Elements

 "details" and "summary" Elements

 "figure" and "figcaption" Elements

"audio" and "video" Elements

 HTML Document Structure and Content

 HTML Document and Elements Syntax

 Displayed and Printed HTML Documents

 Responsive Design of Web Pages

 MathML Integration in HTML Documents

 References

 Full Version in PDF/EPUB