HTML5 Audio and Video
HTML5 provides two new elements <audio> and <video> that allow you to embed audio and video respectively in your website.
Audio
The <audio> element in its simples for looks like this:
<audio src="song.ogg"></audio>It does support more options/attributes:
autoplay: if provided the audio starts playing as soon as possibleloop: audio loops infinitelycontrols: audio element comes with controlsmuted: attribute that represents whether or not the audio is initially mutedsrc: audio sourcevolume: audio volumepreload: hint preload options to the browser to improve user experience.
Other examples:
<!-- simple audio element -->
<audio src="song.ogg" autoplay>
Your browser does not support the <code>audio</code> element.
</audio>
<!-- audio element with lyrics -->
<audio src="song.ogg">
<!-- this are song captions in different languages -->
<track kind="captions" src="song.en.vtt" srclang="en" label="English">
<track kind="captions" src="song.es.vtt" srclang="es" label="Spanish">
</audio>
<!-- audio element with songs in multiple formats -->
<audio controls="controls">
Your browser does not support the <code>audio</code> element.
<source src="song.wav" type="audio/wav">
<source src="song.mp3" type="audio/mp3">
<source src="song.ogg" type="audio/ogg">
</audio>
Additionally you can provide your own custom controls for the audio by handling the audio events and audio javascript apis.
Video
In a similar way than the <audio> element, the <video> element allows to embed video within a web application or website.
The simples way to use a <video> element is:
<!-- Simple video example -->
<video src="videofile.ogg"></video>It supports similiar options to the audio element. Other examples are:
<!-- Simple video example -->
<video src="videofile.ogg" autoplay poster="posterimage.jpg" controls>
Sorry, your browser doesn't support embedded videos,
but don't worry, you can <a href="videofile.ogg">download it</a>
and watch it with your favorite video player!
</video>
<!-- Video with subtitles -->
<video src="foo.ogg">
<track kind="subtitles" src="foo.en.vtt" srclang="en" label="English">
<track kind="subtitles" src="foo.sv.vtt" srclang="sv" label="Svenska">
<
You can select a specific spot to play media by using the currenTime property and the seekable property that specifies piece of audio/video that is available in the browser.
var $audio = document.getElementById('mediaElementID');
// range of media available to select
audio.seekable.start();
audio.seekable.end();
// select a specific time in a media file
audio.currentTime = 150; // Go 150 seconds into the song
// the played property lets you access the part
// of the media that has been played
audio.played.end(); // number of seconds played so far
References
- Tons of good information at MDN using HTML5 audio and video
- MDN HTML5 audio element
- MDN HTML5 video element
Written by Jaime González García , dad, husband, software engineer, ux designer, amateur pixel artist, tinkerer and master of the arcane arts. You can also find him on Twitter jabbering about random stuff.