Chapter 25: Media Elements

widthSets the element’s width in pixels.
heightSets the element’s height in pixels.
<source>Defines resources of the audio or video files
trackDefines the text track for media elements
controlsDisplays controls
autoplayAutomatically start playing the media
loopPlays the media in a repeated cycle
mutedPlays the media without sound
posterAssigns an image to display until a video is loaded


HTML5 provides a new standard for embedding an audio file on a web page.

You can embed an audio file to a page using the <audio> element

<audio controls>
 <source src="file.mp3" type="audio/mpeg">
Your browser does not support the audio element.


You can embed also a video to a webpage using the <video> element:

<video width="500" height="700" controls>
 <source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.

Using <video> and <audio> element to display
audio/video content

Use the HTML or <audio> element to embed video/audio content in a document. The video/audio element contains
one or more video/audio sources. To specify a source, use either the src attribute or the <source> element; the
browser will choose the most suitable one.

Audio tag example:

<!-- Simple video example -->
<video src="videofile.webm" autoplay poster="posterimage.jpg">
 Sorry, your browser doesn't support embedded videos,
 but don't worry, you can <a href="videofile.webm">download it</a>
 and watch it with your favorite video player!
<!-- Video with subtitles -->
<video src="foo.webm">
 <track kind="subtitles" src="foo.en.vtt" srclang="en" label="English">
 <track kind="subtitles" src="" srclang="sv" label="Svenska"> – HTML5 Notes for Professionals 70
<!-- Simple video example -->
<video width="480" controls poster="" >
 <source src="" type="video/webm">
 <source src="" type="video/mp4">
 <source src="" type="video/ogg">
 Your browser doesn't support HTML5 video tag.

Audio tag example:

<!-- Simple audio playback -->
<audio src="" autoplay>
 Your browser does not support the <code>audio</code> element.
<!-- Audio playback with captions -->
<audio src="foo.ogg">
 <track kind="captions" src="foo.en.vtt" srclang="en" label="English">
 <track kind="captions" src="" srclang="sv" label="Svenska">

Video header or background

Adding a video that will autoplay on a loop and has no controls or sound. Perfect for a video header or background.

<video width="1280" height="720" autoplay muted loop poster="video.jpg" id="videobg">
 <source src="video.mp4" type="video/mp4">
 <source src="video.webm" type="video/webm">
 <source src="video.ogg" type="video/ogg">

This CSS provides a fallback if the video cannot be loaded. Note that is it recomended to use the first frame of the
video as the poster video.jpg.

#videobg {
 background: url(video.jpg) no-repeat;
 background-size: cover;

Pin It on Pinterest

Share This