Audio, Video and Progress Elements

HTML5 Lesson: Audio, Video and Progress Elements

Audio on the Web

The HTML5 'audio' element specifies a standard for embedding audio in a web page.There are two different ways to specify the audio source file's URL. The first uses the source attribute:

he second way uses the 'source' element inside the 'audio' element. Multiple elements can be linked to different audio files. The browser will use the first recognized format:

This default player is kind of ugly. Check out jPlayer which is a fully customizable Javascript player!

There are three attributes of 'audio':

controls
autoplay
loop

Videos in HTML

The video element is similar to the audio element.You can specify the video source URL using an attribute in a video element, or using source elements inside the video element:

There are a lot of other useful attributes in video tag including but not limited to:

autoplay - to autoplay video on website load
preload - load the video data in advance
controls - as explained in this course
controlsList="nodownload" - to disable the download option of the video
height & width - values in px
muted - mute the video on load
loop - start the video again after it ends
poster - poster image for your video
buffered
played
crossorigin

Progress Bar

The 'progress' element provides the ability to create progress bars on the web. The progress element can be used within headings, paragraphs, or anywhere else in the body. Use the 'progress' tag in conjunction with JavaScript to dynamically display a task's progress.

Progress Element Attributes

Value: Specifies how much of the task has been completed.
Max: Specifies how much work the task requires in total.

My progress towards retirement from teaching and launching my web dev career:

HTML5 Audio, Video and Progress Elements