View source for HTML/C3/Embedding-Audio-and-Video/English

'''Title of the script: '''Embedding Audio and Video in HTML

'''Author:''' Praveen S

'''Domain Reviewer: '''M.Deivamani

'''Novice Reviewer:''' Madhulika G

'''Keywords: '''HTML, media, embed tag, HTML5, HTML5 audio, HTML5 video, HTML5 audio formats, HTML5 video formats, audio video controls, audio attributes, video attributes, HTML5 browser support, OGG, OGV, mp3, mp4, Spoken Tutorial, Video Tutorial


{| border="1"
|- 
|| Visual Cue
|| Narration
|- 
|| Slide: Introduction
|| Hello and welcome to the spoken tutorial on Embedding Audio and Video in '''HTML'''.
|- 
|| Slide: Learning Objectives
|| In this tutorial we will learn:* How to embed an audio and video file in '''HTML'''

|-
|| Slide: Prerequisite 
|| 

* To practise this tutorial, you should have basic knowledge of '''HTML'''.
* If not, then go through the corresponding''' '''tutorials on this website.

|-
|| Slide: System Requirements
|| To record this tutorial, I’m using 

* '''Ubuntu Linux 16.04 OS'''
* '''HTML5'''
* '''gedit Text Editor'''
* '''Firefox web browser'''

However you may, use any other '''editor''' or '''browser''' of your choice.
|-
|| Slide:  System Requirements
|| I’m also using 

* '''Mac OS''' and
* '''Safari web browser'''

for some part of the demonstration.
|-
|| Slide: Code Files
|| 

* The files used in this tutorial are available in the '''Code Files''' link on this tutorial page.
* Please download and extract them.

|- 
|| Slide: Embedding Media in HTML 4
|| In '''HTML''', we can embed media files like audio/video in our page.

* Upto '''HTML 4,''' '''embed''' or '''object''' '''tags''' were used to embed media files.
* Also a '''flash''' '''plug-in '''was required to play them on the '''browser'''.

|- 
|| Slide: Embedding Media in HTML5
|| 

* However, in '''HTML5''' we can directly embed media using '''audio '''and '''video tags.'''
* Only 3 commonly used audio and video formats are allowed to be used.
* Also the '''web browser''' does not require any '''plugin''' to play those Audio/Video formats

|- 
|| Slide: HTML5 Audio formats
|| These are the audio formats supported by '''HTML5''' and their '''browser compatibility'''.
|- 
|| Slide: HTML5 Video formats
|| These are the video formats supported by '''HTML5''' and their '''browser compatibility'''.
|- 
|| Slide: Important Note
|| 

* Before embedding any media, always ensure that you have all the rights to use the file.
* Sharing files on the web without reusable permission, is illegal.

|- 
|| Only Narration
|| Now let us learn, how to embed an audio and video in a '''HTML''' document.
|- 
|| Show the project folder
|| For this demonstration, I will be use '''intro.ogg, intro.wav, intro.mp3, intro.ogg '''and''' intro.mp4 '''

Also, I have already written an '''HTML''' file named '''audio-video.html'''

These files are available in the '''Code files''' link of this tutorial.
|- 
|| Open audio-video.html in gedit
|| Open the file '''audio-video.html '''in a''' text editor.'''
|- 
|| Point to 1st audio tag
|| Here, I have included an audio file, '''intro.ogg''' using the '''audio tag.'''
|- 
|| Highlight the text “Your browser is not supporting this format.”
|| 

* In case your '''browser''' does not support embedded audio file format,
* then the text between the '''audio''' start and end '''tags''' will be displayed.

|- 
|| Point to 2nd audio tag
|| I have written this '''audio tag''' in a different manner.
|- 
|| Highlight source tag
|| Instead of defining the file name inside the '''audio''' start '''tag''', I have defined it using the '''source tag'''.
|- 
|| Highlight src in 1st audio tag and source in 2nd audio tag
|| But both works the same way.
|- 
|| Highlight both the source tags in 2nd audio tag
|| Using the '''source tag''', we can provide multiple sources.

In this case, I have used two '''source tags''' for two different file formats.
|- 
|| Highlight 

<source src="intro.ogg" type="audio/ogg">
|| If the '''browser''' supports '''ogg''' audio format, then '''intro.ogg''' will play. 
|- 
|| Highlight 

<source src="intro.mp3" type="audio/mp3">
|| If the '''browser''' supports only '''mp3''' format, then '''intro.mp3''' will play. 
|- 
|| Highlight controls in both the audio tag
|| Notice, in both cases inside the '''audio''' start '''tag''', I have used the '''attribute controls.'''

This '''attribute''' will provide '''player controls''' like '''play, pause, timeline slider '''and '''volume'''.
|- 
|| Highlight <br/> <br/>
|| I have used two '''break tags''' for better alignment.
|- 
|| Highlight all the video tags
|| Observe that the '''video tag''' examples look similar to the '''audio tag'''.

Instead of '''audio''' formats, I have used the '''video''' formats here.
|- 
|| Open audio-video.html in firefox
|| Now let us see the output on the '''browser'''.

Let me open the file in '''Firefox web browser'''.
|- 
|| Highlight the audio controls
|| Here are the '''audio players.'''
|- 
|| Scroll and show both the video players
|| Next to the''' audio players''', we see the '''video players. '''
|- 
|| Show the video player

|| Notice that, the '''video players '''are bigger.

The width and height of the '''player''' is according to the '''video''' dimensions.

We need to sort this out first. 
|- 
|| Open audio-video.html in gedit
|| Switch back to the code.
|- 
|| Type:

<video src="intro.ogv" width="640" height="360" controls>
|| In the code, locate the line for the first '''video player'''.

Inside the '''video''' start''' tag''', before the '''controls attribute,''' type the code as shown.
|- 
|| Highlight width="640" height="360"
|| Here I have set the '''player’s''' width as 640 '''pixels''' and the height as 360 '''pixels.'''
|- 
|| Only narration
|| Leave the second '''player''' as it is.
|- 
|| Press Ctrl + S keys
|| Save the code.
|- 
|| Switch to firefox and refresh
|| Switch to the '''browser''' and refresh the page.
|- 
|| Highlight the player
|| The first '''video player’s''' dimension is now set based on our inputs.

Also notice that the '''video''' automatically sets its dimension to fit without stretching.
|- 
|| Only narration
|| Let us now check whether the '''audio''' and '''video''' are playing or not.
|- 
|| Click Play in audio player 1
|| In the first '''audio player''', click on the '''Play button'''.

Yes, the '''audio''' is playing!
|- 
|| Click Pause in audio player 1
|| Click on the '''Pause''' button in the '''player''', to pause the '''audio'''. 
|- 
|| Play the 2nd audio
|| Let me play the second '''audio''' now.

That is also playing!
|- 
|| Only narration
|| In the second '''audio player''', I had given two sources '''intro.ogg '''and''' intro.mp3'''

How do we know which source is playing?
|- 
|| Right Click on Audio Player 2 

Select Save Audio As
|| To cross-check that, right-click on the 2nd '''audio player'''.

Then select '''Save Audio As '''option.
|- 
|| Point to the format section
|| Notice here in the '''format''' dialog box, it says '''ogg.'''
|- 
|| Click on Cancel in the save dialog box
|| Close this dialog box by clicking on the '''Cancel''' button at the bottom.
|- 
|| Click Play in video player 1
|| Next let us try to play the '''videos'''.

Click on the '''Play''' button in the first '''video player'''.
|- 
|| Click Pause in audio player 1
|| The '''video''' is playing!

Click on the '''Pause''' button in the '''player''', to pause the video. 
|- 
|| Play the 2nd Video
|| Likewise, let me play the second '''video'''.

That is also playing!
|- 
|| Highlight the respective player controls 
|| In the '''audio '''and '''video players''', there are common '''controls''' like:

* '''Play/pause''' buttons
* '''Timeline slider'''
* '''Volume control slider'''.

|- 
|| Highlight the fullscreen control in the video player
|| Also in the '''video player''', we have the '''video fullscreen control.'''
|- 
|| Highlight '''controls''' in the code
|| These '''controls''' will be displayed only if we have added the '''controls attribute''' in the start '''tag.'''
|- 
|| Only narration
|| As I was using '''Firefox web browser''', '''ogg audio''' and '''ogv video''' played without any problem.

Let me check the playback in a different '''browser'''.
|- 
|| Open audio-video.html in Safari web browser.
|| For this part of demonstration, I’m using '''Mac OS '''and '''Safari''' '''web browser.'''
|- 
|| Point to the error in audio player 1 & video player 1
|| Observe that, the 1st '''audio player''' and 1st '''video player''' shows error message.
|- 
|| Highlight audio player 1 & video player 1 code
|| In the code, we have used '''ogg audio''' and '''ogv video''' for the respective '''players.'''
|- 
|| Only narration
|| As mentioned earlier, '''Safari browser''' does not support '''ogg''' and '''ogv formats'''.
|- 
|| Highlight audio player 2 & video player 2 code
|| But, in the second part of the code, we used '''mp3 audio''' and '''mp4 video''' for the respective '''players'''.
|- 
|| Point to audio player 1 & video player 1
|| Thats why, in '''Safari browser''' we can see the second '''audio''' and '''video player''' without any error.
|- 
|| Play the second audio and second video
|| Let me play them and cross verify if they work properly.
|- 
|| Only narration
|| Both are working fine.
|- 
|| Right Click on video 2 and select Download Video as
|| When we try to download the '''video''' from the second '''video player''', we get '''.mp4 video.'''
|- 
|| Right Click on audio 2 and select Download audio as
|| When we try to download the '''audio''' from the second '''audio player''', we get '''.mp3 audio'''.
|- 
|| Slide: Common Media Attributes
|| Like '''controls''', we have some other common '''media attributes''' for the '''audio''' and '''video tags.'''

They are:

* '''Preload'''
* '''Autoplay'''
* '''Loop'''
* '''Mute'''
* '''Media Group'''
* '''Poster''' (Only for video tag)
* '''Width''' & '''height''' (Only for video tag)

You can explore these on your own.
|- 
|| Only narration
|| With this we come to the end of the tutorial.

Let us summarise.
|-
|| Slide: Summary 
|| In this tutorial, we have learnt about '''HTML5''' supported '''audio''' and '''video formats.'''

We also learnt how to:

* Embed '''audio''' and '''video''' files
* Provide multiple sources 
* Add '''playback controls''' to the '''player '''and
* Modify '''video player''' dimensions

|-
|| Slide: Assignment
|| As an assignment- 

* Open the file '''MyHomePage.html''' which you created earlier
* Embed any '''.mp3 audio''' and''' .ogv video''' of your choice in the file

|-
|| Slide: About Spoken Tutorial project
|| The video at the following link summarizes the Spoken Tutorial project. 

Please download and watch it.
|-
|| Slide: About Workshop
|| The Spoken Tutorial Project team conducts workshops and gives certificates.

For more details, please write to us.
|-
|| Slide: Forum questions
|| Please post your timed queries in this forum.
|-
|| Slide: Acknowledgement
|| Spoken Tutorial Project is funded by NMEICT, MHRD, Government of India.

More information on this mission is available at this link.
|-
|| Slide: Thanks
|| This is Praveen from IIT Bombay signing off.

Thank you for joining.
|-
|}