PoojaMoolya at 06:31, 24 March 2020

2020-03-24T06:31:01Z

PoojaMoolya: 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..."

2020-03-24T06:30:33Z

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..."

New page

{| 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 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.
|-
|}

@@ Line 45: / Line 45: @@
 || I’m also using
- '''Mac OS''' and   '''Safari web browser''' for some part of the demonstration.
+'''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.
+Please download and extract them.
 |-

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

PoojaMoolya at 06:31, 24 March 2020

PoojaMoolya: 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..."