HTML and CSS Reference
In-Depth Information
In Listing 8-1 you will see an example of the audio and video elements introduced in HTML5. The example also
shows how media elements can be controlled using JavaScript.
Listing 8-1. Basic Example of the Audio and Video Element Introduced in HTML5 to Playback Audio and Video Clips
Without the Use of Plug-ins Such as Java Applets or Flash SWFs
<!DOCTYPE html>
<html xmlns=" " >
<meta charset="UTF-8" />
<title>Media Element</title>
video, audio { display: block }
<script type="text/javascript">
// Obtaining the MediaElement via JavaScript and invoking methods
function togglePlay(source, elementId) {
var mediaElement = document.getElementById(elementId);
if (mediaElement.paused) {;
source.innerText = "Pause";
} else {
source.innerText = "Play";
<h2>Video Example</h2>
<video id="video-example"
<!-- Provide fallback for browsers that doesn't support the video element -->
<p>Browser not support the HTML5 Video element.</p>
<button onclick="togglePlay(this, 'video-example');">Play</button>
<h2>Audio Example</h2>
<audio id="audio-example"
Search WWH ::

Custom Search