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

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

Contributors and Content Editors

Nancyvarkey, Pravin1389