Page 124 - HTML5

Audio

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.
</audio>

Video

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.
</video>

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">
</video>

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;
}

Read Media Elements online: https://riptutorial.com/html/topic/2111/media-elements

https://riptutorial.com/ 108