Embed audio and video in a HTML page

Hello students, welcome to Kwickprep. Your school website wants to play the morning prayer and show the annual day video. Can a plain web page do that? Yes, with just two tags. Today we will learn the audio tag and the video tag, their attributes, and the mistakes that cost marks.

First, a new term. To embed means to place a sound or video file inside the web page. The file then plays right inside the browser window. The student does not need to open a separate music or video app. Modern HTML, called HTML five, gives us two tags for this, audio and video.

Here is the simplest audio tag. It has an opening tag and a closing tag. The src attribute, short for source, gives the name of the sound file, prayer dot M P three. The word controls shows play, pause and volume buttons. Without controls, the page shows nothing, and the student cannot play the sound.

The audio tag has five common attributes. The src attribute names the file to play. The controls attribute shows the play and pause buttons. The autoplay attribute starts the sound as soon as the page opens. The loop attribute starts the sound again when it ends. The muted attribute starts the sound with the volume off.

Four of these are called Boolean attributes. A Boolean attribute is just on or off, so it needs no value. Writing the word alone switches it on. To switch it off, simply do not write it.

The video tag works the same way. The src attribute names the video file, annual dot M P four. Width and height set the size of the video box in pixels. Controls shows the play bar. The poster attribute shows a picture, cover dot J P G, before the video starts playing.

Let us compare which attributes belong where. Width and height are used only with video. Poster is also only for video, because audio has no picture. Controls and loop work in both tags. Autoplay and muted also work in both tags.

Not every browser plays every file format. So we can list more than one file with the source tag. The browser tries the first source, and if it cannot play it, it tries the next. The type attribute tells the browser the format, like video slash M P four. The text line is fallback text, shown only in a very old browser.

Here are the formats you should know. M P three is the most common audio format, and its type is audio slash M P E G. Wave files are another audio format, with larger files. O G G is an open audio format. M P four is the most common video format. Web M is an open video format made for the web.

Some older books also show the embed tag. It can place a sound or video file on the page too. It is an empty tag, so it has no closing tag. It does not have its own controls attribute, so the browser decides what to show. For new pages, always prefer the audio and video tags.

Watch out for four common mistakes. If you forget controls, the student sees nothing to click. If the file name or folder is wrong, the media will not load. Browsers often block autoplay with sound, so add muted if autoplay must work. And poster works only with video, never with audio.

Pause and predict. What does a visitor see on the page for this code? The answer is nothing at all. There is no controls attribute, so no buttons appear. The loop attribute only matters after the sound starts playing.

Now let us put it all together in one page. The heading says Annual Day. Below it, the video tag plays day dot M P four, four hundred pixels wide, with controls. Then the audio tag plays song dot M P three with its own controls. Keep the media files in the same folder as the page, so the names work.

Let us revise what we learned today. To embed means to place media inside the web page. The audio and video tags need src and usually controls. Autoplay, loop and muted are Boolean attributes that switch features on. Width, height and poster belong to the video tag. And the source tag lets you give the same media in many formats. Try making a page with your favourite song and a short video.