HTML & CSS: Audio & Video

 

Embed

The 'embed' element has been around for years, and it is commonly used to display video files, especially YouTube videos. The attributes of 'embed' are summarized below:

AttributeDescription
srcThe URL of the audio or video file
typeThe MIME type of the file to play
widthDetermines the width in the browser
heightDetermines the height in the browser

 

Here 'embed' is used to display a YouTube video, of The Beatles' first appearance on the Ed Sullivan TV show, on February 9, 1964. It was watched by 73 million people in the U.S. Here is the code:

<p><embed width="560" height="315" src="https://www.youtube.com/embed/jenWdylTtzs">

And here is the YouTube video:

 

Audio and video

In HTML5, the 'audio' and 'video' elements are used to display sound and video files. Here are the common attributes of 'audio and 'video':

AttributeDescription
srcThe URL of the audio or video file
posterUsed only for video, this provides the path to a static image to be displayed prior to the video playing
preloadDefines which information is preloaded: none, metadata only, or auto (the entire file)
autoplayIndicates whether a media file will play automatically once the page loads
loopDetermines whether a media file will loop
mutedUsed only for video, this causes the video to begin with volume muted
controlsCauses controls to display
widthDetermines width in the browser
heightDetermines height in the browser

 

Below is an example of an audio file being made available in a browser. Here is the code:

<audio id="audioplayer" src="birds.mp3" controls></audio>

And here is what the code produces:


I used the Voice Recorder app on my phone to record this sound (of birds) from the Web.

 

Below is an example of a video file being made available in a browser.

Here is the code:

<video id="videoplayer" width="560" controls>
<source src="Raritan.mp4">
</video>

And here is what the code produces:

I recorded this video on my phone.

 

Exercise

For this exercise, instead of using code.org, write the HTML in a text editor like Notepad++. To view code that you've written in Notepad++, right-click on the tab at the top of the page and choose "Open in Default Viewer."

- Use 'embed' to display a YouTube video on your webpage.
- Use 'audio' to make available an audio file. The audio file can reside in your server space. The full path to the audio file might look like: src = "H:/HTML/myAudioFile.mp3", where "H:" is the 'top' of your server space.
- Use 'video' to make available a video file. The video file can also reside in your server space.