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="
http://www.w3.org/1999/xhtml
"
>
<head>
<meta charset="UTF-8" />
<title>Media Element</title>
<style>
video, audio { display: block }
</style>
<script type="text/javascript">
// Obtaining the MediaElement via JavaScript and invoking methods
function togglePlay(source, elementId) {
var mediaElement = document.getElementById(elementId);
if (mediaElement.paused) {
mediaElement.play();
source.innerText = "Pause";
} else {
mediaElement.pause();
source.innerText = "Play";
}
}
</script>
</head>
<body>
<article>
<h2>Video Example</h2>
<video id="video-example"
controls="controls"
poster="media/poster.png"
src="media/trailer.mp4">
<!-- Provide fallback for browsers that doesn't support the video element -->
<p>Browser not support the HTML5 Video element.</p>
</video>
<button onclick="togglePlay(this, 'video-example');">Play</button>
</article>
<article>
<h2>Audio Example</h2>
<audio id="audio-example"
controls="controls"
src="media/04-Death_Becomes_Fur.mp4">
