Difference between revisions of "HTML/C3/Embedding-Audio-and-Video/English-timed"
From Script | Spoken-Tutorial
PoojaMoolya (Talk | contribs) (Created page with " {| border="1" |- || Time || Narration |- || 00:01 || Hello and welcome to the spoken tutorial on Embedding Audio and Video in '''HTML'''. |- || 00:09 || In this tutorial...") |
PoojaMoolya (Talk | contribs) |
||
| Line 45: | Line 45: | ||
|| I’m also using | || I’m also using | ||
| − | + | '''Mac OS''' and '''Safari web browser''' for some part of the demonstration. | |
|- | |- | ||
|| 01:00 | || 01:00 | ||
|| The files used in this tutorial are available in the '''Code Files''' link on this tutorial page. | || The files used in this tutorial are available in the '''Code Files''' link on this tutorial page. | ||
| − | + | Please download and extract them. | |
|- | |- | ||
Latest revision as of 12:01, 24 March 2020
| 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. |
