Audio and Video Files
<!DOCTYPE html>
<html>
<head>
<title>My Audio</title>
</head>
<body>
<audio>
</audio>
</body>
</html>
Next, we need to tell the browser what audio file to use. We do this with a <source> element inside the <audio> element.
<audio>
<source src="sound_sample.wav" type="audio/wav">
</audio>
Notice that the <source> element does not need an end tag.
The <source> element can take three different file types; .wav, .ogg, or .mp3. The type attribute would contain "audio/wav", "audio/ogg", or "audio/mpeg" depending on which file type you were using.
Next, we need to add the controls to our <audio> element.
<audio controls>
<source src="sound_sample.wav" type="audio/wav">
</audio>
The controls attribute gives us the 'play' button etc.
There are some other attributes we could add to the <audio> element, like the mute attribute or the autoplay attribute. Autoplay makes the audio file play without pressing the 'play' button, however, this attribute does not work with all Web browsers.
And the mute attribute just turns the sound off.
<audio controls autoplay mute>
<source src="sound_sample.wav" type="audio/wav">
</audio>
Last, we should add some text inside the <audio> element to display if there is any problem with the audio playback.
<audio controls autoplay mute>
<source src="sound_sample.wav" type="audio/wav">
Your browser does not support audio files.
</audio>
Lets talk about video files.
The <video> element is similar to the <audio> element.
<!doctype html>
<html>
<head>
<title>My Video</title>
</head>
<body>
<video width="640" height="360" controls>
<source src="ball_roll.mp4" type="video/mp4">
</video>
</body>
</html>
The <video> element has a start and end tag. The height and width attributes set the size of the viewing screen. The controls attribute gives you the play button etc. The <source> element tells what file to use and what type of file. Once again the <source> element does not need an end tag.
In the next tutorial we will talk a little about the <object> element.
Comments
Post a Comment