HTML/C3/Embedding-Audio-and-Video/English-timed
From Script | Spoken-Tutorial
Revision as of 12:01, 24 March 2020 by PoojaMoolya (Talk | contribs)
Time | Narration |
00:01 | Hello and welcome to the spoken tutorial on Embedding Audio and Video in HTML. |
00:09 | In this tutorial we will learn:* How to embed an audio and video file in HTML |
00:17 | To practise this tutorial, you should have basic knowledge of HTML. |
00:23 | If not, then go through the corresponding tutorials on this website. |
00:29 | To record this tutorial, I’m using
Ubuntu Linux 16.04 OS |
00:37 | HTML5 |
00:39 | gedit Text Editor
Firefox web browser |
00:45 | You may, use any other editor or browser of your choice. |
00:51 | I’m also using
Mac OS and Safari web browser for some part of the demonstration. |
01:00 | The files used in this tutorial are available in the Code Files link on this tutorial page.
Please download and extract them. |
01:11 | In HTML, we can embed media files like audio/video in our page. |
01:18 | Upto HTML 4, embed or object tags were used to embed media files. |
01:25 | Also a flash plug-in was required to play them on the browser. |
01:31 | However, in HTML5 we can directly embed media using audio and video tags. |
01:39 | Only 3 commonly used audio and video formats are allowed to be used. |
01:45 | Also the web browser does not require any plugin to play those Audio/Video formats |
01:52 | These are the audio formats supported by HTML5 and their browser compatibility. |
02:00 | These are the video formats supported by HTML5 and their browser compatibility. |
02:07 | Important Note : Before embedding any media, always ensure that you have all the rights to use the file. |
02:16 | Sharing files on the web without reusable permission, is illegal. |
02:22 | Now let us learn, how to embed an audio and video in a HTML document. |
02:29 | For this demonstration, I will be using intro.ogg, intro.wav, intro.mp3, intro.ogg and intro.mp4 |
02:43 | Also, I have already written an HTML file named audio-video.html |
02:51 | These files are available in the Code files link of this tutorial. |
02:57 | Open the file audio-video.html in a text editor. |
03:03 | Here, I have included an audio file, intro.ogg using the audio tag. |
03:10 | In case your browser does not support embedded audio file format, then the text between the audio start and end tags will be displayed. |
03:20 | I have written this audio tag in a different manner. |
03:25 | Instead of defining the file name inside the audio start tag, I have defined it using the source tag. |
03:32 | But both works the same way. |
03:34 | Using the source tag, we can provide multiple sources. |
03:40 | In this case, I have used two source tags for two different file formats. |
03:46 | If the browser supports ogg audio format, then intro.ogg will play. |
03:53 | If the browser supports only mp3 format, then intro.mp3 will play. |
04:00 | Notice, in both cases inside the audio start tag, I have used the attribute controls. |
04:07 | This attribute will provide player controls like play, pause, timeline slider and volume. |
04:17 | I have used two break tags for better alignment. |
04:22 | Observe that the video tag examples look similar to the audio tag. |
04:28 | Instead of audio formats, I have used the video formats here. |
04:34 | Now let us see the output on the browser. |
04:38 | Let me open the file in Firefox web browser. |
04:43 | Here are the audio players. |
04:46 | Next to the audio players, we see the video players. |
04:50 | Notice that, the video players are bigger. |
04:55 | The width and height of the player is according to the video dimensions.
We need to sort this out first. |
05:02 | Switch back to the code. |
05:05 | In the code, locate the line for the first video player. |
05:10 | Inside the video start tag, before the controls attribute, type the code as shown. |
05:18 | Here I have set the player’s width as 640 pixels and the height as 360 pixels. |
05:27 | Leave the second player as it is. |
05:30 | Save the code. |
05:32 | Switch to the browser and refresh the page. |
05:35 | The first video player’s dimension is now set based on our inputs. |
05:42 | Also notice that the video automatically sets its dimension to fit without stretching. |
05:50 | Now let us check whether the audio and video are playing or not. |
05:56 | In the first audio player, click on the Play button. |
======Patch the audio ====== | |
06:04 | Yes, the audio is playing! |
06:07 | Click on the Pause button in the player, to pause the audio. |
06:12 | Let me play the second audio now. |
=====Patch the audio===== | |
06:18 | That is also playing! |
06:22 | In the second audio player, I had given two sources intro.ogg and intro.mp3 |
06:31 | How do we know which source is playing? |
06:34 | To cross-check that, right-click on the 2nd audio player. |
06:39 | Then select Save Audio As option. |
06:43 | Notice here in the format dialog box, it says ogg. |
06:49 | Close this dialog box by clicking on the Cancel button at the bottom. |
06:55 | Next let us try to play the videos. |
06:58 | Click on the Play button in the first video player. |
=======Patch the audio===== | |
07:10 | The video is playing! |
07:12 | Click on the Pause button in the player, to pause the video. |
07:17 | Likewise, let me play the second video. |
====Patch the audio==== | |
07:30 | This is also playing! |
07:33 | In the audio and video players, there are common controls like:
Play/pause buttons, Timeline slider, Volume control slider. |
07:44 | Also in the video player, we have the video fullscreen control. |
07:50 | These controls will be displayed only if we have added the controls attribute in the start tag. |
07:59 | As I was using Firefox web browser, ogg audio and ogv video will be played without any problem. |
08:08 | Let me check the playback in a different browser. |
08:12 | For this part of demonstration, I’m using Mac OS and Safari web browser. |
08:19 | Observe that, the 1st audio player and 1st video player shows error message. |
08:26 | In the code, we have used ogg audio and ogv video for the respective players. |
08:34 | As mentioned earlier, Safari browser does not support ogg and ogv formats. |
08:42 | But, in the second part of the code, we used mp3 audio and mp4 video for the respective players. |
08:51 | That's why, in Safari browser we can see the second audio and video player without any error. |
08:59 | Let me play them and cross verify if they work properly. |
====patch the audio==== | |
09:16 | Both are working fine. |
09:18 | When we try to download the video from the second video player, we get .mp4 video. |
09:28 | When we try to download the audio from the second audio player, we get .mp3 audio. |
09:37 | Like controls, we have some other common media attributes for the audio and video tags. |
09:44 | They are:
Preload, Autoplay, Loop, Mute |
09:50 | Media Group, Poster , Width and height |
09:55 | You can explore these on your own. |
09:58 | With this we come to the end of the tutorial.
Let us summarise. |
10:04 | In this tutorial, we have learnt about HTML5 supported audio and video formats. |
10:11 | We also learnt how to:
Embed audio and video files |
10:16 | Provide multiple sources |
10:19 | Add playback controls to the player and Modify video player dimensions |
10:27 | As an assignment- Open the file MyHomePage.html which you created earlier |
10:35 | Embed any .mp3 audio and .ogv video of your choice in the file |
10:42 | The video at the following link summarizes the Spoken Tutorial project.
Please download and watch it. |
10:50 | The Spoken Tutorial Project team conducts workshops and gives certificates.
For more details, please write to us. |
11:00 | Please post your timed queries in this forum. |
11:03 | Spoken Tutorial Project is funded by MHRD, Government of India. |
11:10 | This is Praveen from IIT Bombay signing off.
Thank you for joining. |