Difference between revisions of "HTML/C3/Embedding-Audio-and-Video/English"
From Script | Spoken-Tutorial
Pravin1389 (Talk | contribs) |
Nancyvarkey (Talk | contribs) |
||
| Line 252: | Line 252: | ||
|- | |- | ||
|| Only narration | || Only narration | ||
| − | || As I was using '''Firefox web browser''', '''ogg audio''' and '''ogv video''' played without any problem. | + | || 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'''. | Let me check the playback in a different '''browser'''. | ||
| Line 272: | Line 272: | ||
|- | |- | ||
|| Point to audio player 1 & video player 1 | || 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 | || Play the second audio and second video | ||
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 |
|
| Slide: System Requirements | To record this tutorial, I’m using
However you may, use any other editor or browser of your choice. |
| Slide: System Requirements | I’m also using
for some part of the demonstration. |
| Slide: Code Files |
|
| Slide: Embedding Media in HTML 4 | In HTML, we can embed media files like audio/video in our page.
|
| Slide: Embedding Media in HTML5 |
|
| 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 |
|
| 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.” |
|
| 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:
|
| 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:
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:
|
| Slide: Assignment | As an assignment-
|
| 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. |
