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

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