HTML/C3/Embedding-Audio-and-Video/English-timed

From Script | Spoken-Tutorial
Revision as of 12:00, 24 March 2020 by PoojaMoolya (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search
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.

Contributors and Content Editors

PoojaMoolya