This article is part of my personal wiki where I write personal notes while I am learning new technologies. You are welcome to use it for your own learning!
HTML5 provides two new elements
<video> that allow you to embed audio and video respectively in your website.
<audio> element in its simples for looks like this:
It does support more options/attributes:
autoplay: if provided the audio starts playing as soon as possible
loop: audio loops infinitely
controls: audio element comes with controls
muted: attribute that represents whether or not the audio is initially muted
src: audio source
volume: audio volume
preload: hint preload options to the browser to improve user experience.
<!-- 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>
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
Written by Jaime González García , Dad, Husband, Front-end software engineer, UX designer, amateur pixel artist, tinkerer and master of the arcane arts. You should follow him on Twitter where he shares useful stuff! (and is funny too).Follow @vintharas