Difference between revisions of "HTML/C3/Embedding-Audio-and-Video/English"

From Script | Spoken-Tutorial
Jump to: navigation, search
(Created page with ".")
 
 
(One intermediate revision by one other user not shown)
Line 1: Line 1:
−
.
+
'''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''' will be 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
 +
|| That's 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.
 +
|-
 +
|}

Latest revision as of 15:58, 24 May 2019

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


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

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 will be 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 That's 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.

Contributors and Content Editors

Nancyvarkey, Pravin1389

Retrieved from "https://script.spoken-tutorial.org/index.php?title=HTML/C3/Embedding-Audio-and-Video/English&oldid=47541"