Video, Audio & Media in HTML | Sigma Web Development Course - Tutorial #10

Summary

This tutorial video delves into the utilization of audio, video, and media elements in HTML. It demonstrates embedding videos with attributes like autoplay, muted, and controls, as well as adjusting dimensions. The video also covers the audio tag, showcasing controls, autoplay, loop, and muted functionalities. Additionally, it explains the preload attribute's impact on media loading and introduces SVG for creating vector images and iframes for embedding websites. The presenter concludes with a quick quiz, encouraging viewers to create a categorized media website using these elements.

Takeaways

• 📹 HTML supports embedding media elements like audio and video directly within the webpage.
• 🔁 The 'autoplay' attribute allows a video to start playing as soon as the page loads.
• 🔇 The 'muted' attribute can be used to ensure the video starts without sound, which is useful for instructional videos.
• ⭕ The 'loop' attribute makes the video restart once it reaches the end.
• 🎥 The 'controls' attribute adds playback controls like play, pause, and volume adjustment to the video element.
• 🌐 The 'src' attribute in video and audio tags specifies the source file, which can be a local file or an external URL.
• 🖼️ The 'poster' attribute in the video tag can display an image before the video starts playing, similar to a thumbnail.
• 🔊 The 'preload' attribute in audio tags determines how much of the audio file is loaded when the page loads, with options like 'none', 'metadata', or 'auto'.
• 🎶 The audio tag in HTML is used to embed sound files and can be controlled similarly to video with attributes like 'autoplay', 'loop', and 'muted'.
• 🖼️ SVG (Scalable Vector Graphics) can be used in HTML to create and display high-quality, scalable images.
• 🔗 The 'iframe' element allows embedding another webpage within the current page, which can be useful for including content like YouTube videos.

Q & A

What are the main topics covered in the video?

The video covers how to use audio, video, and media elements in HTML, including autoplay, muting, video controls, and using attributes like loop, muted, and poster.

How do you add a video in HTML?

To add a video in HTML, use the <video> tag with the src attribute pointing to the video file, and optional attributes like controls, autoplay, loop, and muted.

What is the purpose of the 'controls' attribute in the <video> tag?

The 'controls' attribute adds video controls such as play, pause, volume, fullscreen, and download options to the video.

How can you autoplay a video when the page loads?

You can autoplay a video by adding the 'autoplay' attribute to the <video> tag.

What does the 'loop' attribute do in the <video> tag?

The 'loop' attribute makes the video start over again automatically after it finishes playing.

How can you mute a video in HTML?

You can mute a video by adding the 'muted' attribute to the <video> tag.

What is the 'poster' attribute used for in the <video> tag?

The 'poster' attribute is used to specify an image to be shown while the video is downloading, or until the user hits the play button.

How do you add audio in HTML?

To add audio in HTML, use the <audio> tag with the src attribute pointing to the audio file, and optional attributes like controls, autoplay, loop, and muted.

What is the 'preload' attribute in the <audio> tag?

The 'preload' attribute specifies if and how the author thinks the audio should be loaded when the page loads. It can have values 'none', 'metadata', or 'auto'.

What is an iframe and how is it used?

An iframe is an HTML element that allows you to embed another HTML page within the current page. It is used to embed content like another website or a YouTube video.

What are SVG files and how are they used in HTML?

SVG (Scalable Vector Graphics) files are used to define vector-based graphics for the web. They can be embedded directly in HTML using the <svg> tag or linked as an external file using the <img> tag.

How can you ensure an SVG file displays correctly in a browser?

To ensure an SVG file displays correctly in a browser, include the XML namespace declaration at the beginning of the SVG file.

Outlines

00:00

📹 HTML5 Media Elements: Video and Audio Basics

This paragraph introduces the use of HTML5 media elements, focusing on video and audio tags. It explains how to embed videos in HTML, control video playback features such as autoplay, muted, and controls, and adjust video dimensions. The speaker also discusses the importance of the 'src' attribute for video files, whether they are local or from an external source. Additionally, it touches on the use of the 'poster' attribute to display a thumbnail before video playback.

05:02

🔊 Deep Dive into Audio Attributes and Preload Options

The second paragraph delves deeper into the audio element in HTML, demonstrating how to embed and control audio playback with attributes like 'controls', 'autoplay', 'loop', and 'muted'. It highlights the peculiarities of the 'preload' attribute, explaining its different values and their impact on how audio files are loaded by the browser. The speaker also encourages viewers to share the playlist and engage with the content by liking and starring the repository to support the creation of free educational resources.

10:04

🖼️ Exploring SVG Integration and Iframe Embedding

The final paragraph covers additional media-related HTML elements, starting with SVG for creating high-quality vector images that can be used inline like the 'img' tag. It addresses common issues with displaying SVG files in browsers and the necessity of including a namespace declaration. The paragraph also explains how to use 'iframe' tags to embed external websites or YouTube videos, providing examples of how to adjust iframe dimensions and start videos at specific timestamps. The speaker concludes with a quick quiz challenge for viewers to create a categorized media website using the discussed elements and encourages interaction through comments and GitHub.

Keywords

💡HTML

HTML, or HyperText Markup Language, is the standard language used to create and design web pages. It forms the backbone of the internet by providing the structure and content of a webpage. In the video, HTML is used to embed various media elements such as video, audio, and SVG, showcasing how these elements can be integrated into a webpage to enhance user experience.

💡Video Element

The video element is a key concept in the script, referring to the HTML tag used to embed video content into a webpage. The script explains how to use attributes like 'src', 'controls', 'autoplay', 'loop', and 'muted' to customize the video playback experience. For example, the 'autoplay' attribute allows the video to start playing as soon as the page loads, while 'muted' ensures the video plays without sound by default.

💡Audio Element

Similar to the video element, the audio element is an HTML tag that allows audio content to be embedded into a webpage. The script discusses attributes such as 'src', 'controls', 'autoplay', 'loop', and 'muted' for the audio element. It demonstrates how to control the audio playback, including automatically playing the audio and looping it to repeat the audio content.

💡Media Controls

Media controls refer to the set of interactive buttons and sliders provided by the browser for controlling media playback, such as play, pause, and volume. The script mentions that these controls are automatically included when the 'controls' attribute is added to the video or audio element, giving users the ability to interact with the media content on the webpage.

💡Autoplay

The 'autoplay' attribute, when added to a media element, instructs the browser to begin playing the media as soon as the webpage is loaded. In the script, the concept of autoplay is explained in the context of both video and audio elements, emphasizing its role in automatically initiating media playback without user interaction.

💡Muted

The 'muted' attribute is used to silence the audio output of a media element by default. The script explains how to apply the 'muted' attribute to both video and audio elements, which can be useful for avoiding unwanted noise or for situations where the audio is not essential to the content.

💡Poster

The 'poster' attribute is associated with the video element and specifies an image to display as a placeholder before the video is played. In the script, the poster attribute is used to show a thumbnail image that represents the video content, which can entice users to play the video or provide context if the video does not autoplay.

💡SVG

SVG stands for Scalable Vector Graphics, which is a format for creating high-quality, resolution-independent images that can be scaled to any size without loss of quality. The script discusses SVG as a media element that can be embedded into HTML pages using the 'img' tag or by including the SVG code directly in the HTML document.

💡Iframe

An iframe, or inline frame, is an HTML element that allows one webpage to be embedded within another. The script demonstrates how to use the iframe element to include external websites or content, such as YouTube videos, within a webpage. This can be used for displaying third-party content or creating a more integrated browsing experience.

💡Preload Attribute

The 'preload' attribute in HTML media elements provides a way to suggest how much of the media resource to preload. The script explains the different values this attribute can have, such as 'none', 'metadata', and 'auto', which dictate whether the browser should preload the media file, its metadata, or the entire file for faster playback.

Highlights

Introduction to how audio, video, and media elements are used in HTML.

Explanation of embedding videos in HTML and controlling autoplay, muting, and enabling/disabling video controls.

Demonstration of adding a video tag with src attribute in an HTML file.

Adjusting video dimensions using width and height attributes without needing to specify 'px'.

Using the controls attribute to enable browser-provided video controls like play, pause, and volume.

Details on the SRC attribute allowing video files from external URLs or servers.

Autoplay attribute to automatically start video playback when the page loads.

Loop attribute to repeat the video playback.

Muted attribute to mute the video by default.

Poster attribute to display an image before the video plays, functioning like a thumbnail.

Introduction to audio tags and their usage in HTML with SRC attribute.

Controls attribute for audio tags to enable play, pause, and volume adjustments.

Autoplay and loop attributes for audio, allowing automatic playback and repetition.

Muted attribute for audio to mute it by default and provide user control to unmute.

Preload attribute explained with different values: none, metadata, and auto.

SVG introduction as a format for creating high-graphics vector images.

SVG usage similar to the img tag and the importance of namespace declaration for display.

Iframe explanation for embedding another website within your own.

Using iframes to embed YouTube videos with specific start times.

Quick quiz challenge to create a website with categorized videos and audios using HTML media elements and iframes.

Encouragement to share the playlist, like the video, and participate in the quiz with 'sigma batch op' in the comments.

Transcripts

In today's video, we will learn how audio, video and media elements are used in HTML.

We saw in our very first video that we can embed videos in HTML.

Today I will tell you how the video is auto-played,

how to keep a muted video and how you can enable and disable the video controls.

Along with that, we will also see very closely about audio,

how media can be shown in an overall page

So do like this video

And stay in this video

Because the examples I have used for video tags are very good

Let's go to the video screen

Let's roll the intro

Intro

Friends, this time I have made a folder named video10

and I will not waste your time by opening open with code by right clicking on shift

In fact, I will make it in index.html

And the topic of today's video is video

How to play a video, how to put a video in an html file

How to put audio, how to put media

so adding video is very straight forward

I will copy it here, which is our video tag

it has an src attribute and it has some other attributes

which I will discuss with you

but first of all I want to tell you here

that video src is equal to you will write here

so if you have video.mp4 then it will play

I have video.mp4 so let's see here

I have put it here with ctrl

and I will click here and preview it

and you can see here that this video has come

now this is a very big video

so what can I do is I can give its width

so I can say width is equal to 555 pixels

and as soon as I do 555 pixels

in fact I don't need to write px I will just, in fact, I don't need to write px, I'll just do 555.

Like we don't need to write px in the image,

we don't need to write px here either.

So as soon as I did width is equal to 555,

in fact, I do one thing, I do height is equal to 555

so that it becomes smaller, in fact, I make it smaller,

I do 255 and you see it came here, okay.

Now I play it because I have taken control, I can set it to 255 and you see it came here. Now I play it because I have set the controls, I can play it.

What did you say?

America is a good road right now.

What did you say?

What's your name?

Where have you been in the US?

I have been to many places in the US.

Tell me your name.

Gopindra Jogi

Ha ha ha ha ha

So, you can play the video like this.

Now here are some attributes of the video tag.

It is very simple to use the video tag.

You should have a video.

You have given the path of the video.

After that you have given the controls.

So these controls will come to you.

You can download it.

You can do full screen.

You can mute.

You can do picture in picture.

All this is automatically provided by your browser.

But let me tell you about some attributes.

The first attribute is SRC.

So you know that put the video here.

The name of the video file is SRC.

This video file can also come from an external URL.

If I have uploaded a video on Amazon S3 or somewhere else,

then I can also put the URL of that video here.

It is not necessary that the file is in your computer.

It can also be on your server.

It can also come from a third party.

Now what does the control do?

Adds video controls like play, pause and volume.

Which we saw here in the video of Bhupendra Jogi.

You are getting to see the controls here.

Now what is this thing? The browser automatically sees what control ads will be in your video,

what will not be there. Then see what will autoplay do? It will automatically play as soon as the page loads.

Okay, so if I put autoplay here, you can see here that it is auto-play.

So I will remove auto-play from here.

And our next attribute

is loop. Means once

our video is played

then it will loop.

Like I will show you.

Where did you see the market?

So it started again.

Once I finished it, it started again.

So this loop works like this.

The next attribute is muted, muted mutes the video.

So if I write here muted, sometimes we want the video to be muted.

In fact, when I add videos here on codewithhari.com

and I demonstrate something like downloading VS code or something

then I use the muted attribute.

Because I don't want that when I record a video,

if there is any background noise, you can hear it

for example, I want to show you that this is the element

so I will scroll and make a video

I will highlight it like this, so I don't need audio in it

so I mute it

so you can use muted attribute in your websites

then poster, poster is very important

so I have an image here

download.jpg

if I write here poster is equal to and I, download.jpg If I write here, poster is equal to

and I write download.jpg

so you can see it will look like this

this is how the poster looks like, if I play it

the video will play, so in a way it's a thumbnail

you have seen the thumbnail of a YouTube video

it's exactly the same, this poster attribute

so you can use all these attributes

you know that width and height specifies the dimension of the video

like I have added both width and height here you saw, so and height you know that specifies the dimension of the video like I have added width and height here

you saw, so I hope you understood this thing

now after this the thing I want to tell you is audio

so this is for all the attributes of your video

it is very straight forward, I want you to

make a website which I am going to give you at the end of this video

in quick quiz, so listen to the quick quiz

infact I will put the heading here, quick quiz, okay?

So that I don't forget.

I will give this to you now.

And this is going to be a very interesting quiz and everyone must solve it.

But before that,

as soon as you type audio, you get SRC here.

And I have to put SRC in sachin.mp3.

So as soon as I put it in sachin.mp3,

you see here, I will reload it.

And there is no audio here, which is strange coming here. I have to write controls here.

So if I don't write controls, I won't see the audio.

Now the audio is here. I can see the controls and set the volume.

I play this audio.

Sachin, what is in Sachin?

Sachin is a fool.

So this is our audio. If I mute it, it won't work. I can also increase it further. Sachin is what is in Sachin? He is a stupid Sachin So this is our audio, if I mute it

then it won't work, I can increase it further

He is a stupid Sachin

So you have seen, this is Sachin.mp3 audio

Now what we will do is

we will see some attributes of this audio

SRC you know that

source of video file

then you know controls

play, pause or volume, which we have seen

what will autoplay do? it will automatically play

if i here

auto play, it will play automatically

ok

so what will auto play do?

it will play automatically

after this next attribute

is loop, what will loop do?

it will repeat, if i want to loop

it, so i auto play it and i loop it

once it will repeat it, if I want to loop it, then I will auto play it and loop it Sachin, what is in Sachin?

Sachin is a fool.

Once.

Sachin, what is in Sachin?

Second time.

Fool.

So you saw that it was repeated, means it was played once, then it was played again.

Because I had looped the audio, okay.

So you saw this thing.

Sachin.mp3, I looped it.

Means it was played once, then it was played.

Then it was played, okay.

What is Sachin? Sachin, okay.

She was repeating it again and again. Because this again, then it played again, ok what is Sachin, Sachin, ok, it was repeating again and again

because this MP3 will play again and again

so there are many cases of this that when you want this MP3 to repeat

ok, so if you want your MP3 to repeat then you can use this

now after this, what will mutate do, it will mute the audio

and definitely you don't want your audio to be muted by default

but sometimes we want that

the audio is muted and we can tell the user

that listen to this and unmute it

we do this when we have multiple audios

you want to show 5-6 audios at once, you can mute them

the user can play and unmute and watch

so you have the control, you can use it if you want

so in total this is the thing, I hope you understood this thing

you must have enjoyed, now preload, the most confusing attribute

that's why I have explained it on codewithaddy.com

that the preload attribute can have these values

the first value can be none, this is the default value

it indicates that the browser should not preload the audio at all

preload means if you want the browser to fetch the data from the beginning then you will use the preload attribute

otherwise you will not use the preload attribute, preload is equal to none, default value, preload is equal to metadata means

that the browser will preload the information about the audio file, means it will preload the audio file

And by auto, browser will preload the audio file

So preload is equal to auto, so it will download and automatically load

So that whenever user plays it, it will save the audio

So this is the work of preload attribute

And this is asked a lot in interviews, So you should know what is preload attribute.

Before moving forward, I want you to share this playlist with your friends.

Because I am seeing that the interest is declining a lot.

As we are moving forward in the videos.

My request to you is that you like this video.

And along with that, as you are forking this repository,

Keep starting it.

Your star, your likes, all this will help me a lot to bring such free courses

So this was about audio and video tags

I have also told you all the attributes

And you should definitely use it

I will give you all the images so that you can try it out

Now many people were asking if we can use replit

See, I have not used replit

But replit.com is an amazing website

If you want to use it in your phone

If you want to run html

There is a replit app for ios

There is also for android

So you can try it out

Many people are asking how to do recording in the phone

But what I want now is vs code

Which most of the people want to use

Prefer So I thought why not make videos in VS code which most of the people prefer

So I thought why not make videos in VS code

But I personally use replit a lot

Infact videos also comes in replit

Next topic is SVG

Related to media

What is SVG?

SVG is a format through which you can create images

With high graphics

So if you copy you can make high graphics vector images so if you copy you can make circle

so svg is used exactly like

how our img tag is used

so if i put svg here

so this svg will come here

video, audio, svg are inline elements

that's why we are seeing them in one line

you have seen it here

now what is here, you can save svg file separately

you can save svg file separately, like if i write here

img.svg and save svg content in it

so if i write img here

and i will write img.svg

so you guys see here, I didn't get this image

if I write alt here and write my svg image

so you can see here that my svg image is like this

but I didn't get to see svg

why did this happen?

this happened because the svg

I write svg file in browser

and whenever you want to see svg file in browser you will put a declaration above, I will write file in browser and svg file whenever you want to see it in browser

you will put a declaration above it, I will show you

so I have written svg file not showing

so here is an answer of stack overflow

which will tell you, so you have to write this

xml something like this

you have to add this, it is called namespace declaration

so you have to add this It's called namespace declaration So you have to add this SVG

And now you can see SVG here

So this is very important

And when you will make your own websites in future

You will definitely get stuck in this problem

I get stuck in this problem

So I am telling you that I have already told you the problem you will get stuck in

You didn't get the problem, I have already told you the problem and the solution

Next topic is iframes

Iframes is a very simple thing

You can embed another website in your website

Like if I want to embed this webpage

I can use iframes like this

I will copy this url

I will paste it here

And you can see that this website is completely embedded here

in this small iFrame, okay?

You definitely want to embed it in a big iFrame

but if you want it to be embedded, then you can embed it like this

I will do one thing, I will increase its height a little

so width is equal to width is written

width is equal to let's say 122

height is equal to 444, okay?

Assume, so see it came like this, okay, now definitely it was coming in this width,

so it came in this line, but if I increase the width a little,

let's say I increase the width, 322, okay,

so see here, my website is completely embedded,

are you seeing, so you can embed a website,

another use case of iframe is YouTube video,

if you want to share youtube video

and click on embed

it will give you iframe code

and you can start it from here

if you want to start at a particular time

you can do that

the point at which you will start and share

that time will come here

let me show you

let's say I want to start from here

let's say video starts from here so I will click on share

after that I will click on embed

I will start at 12.19

and I will copy it

there is a copy button

and I will put it in my code

so I will comment this iframe

and I will put it in the iframe below

I will wrap the word so that you can see the code properly

so now what I will do is after pasting this I will show word wrap so that you can see the code properly. So now what I will do is after pasting this,

I will show you the document.

See this video is embedded here.

So I hope you understood this thing.

And this is all that happens in media html.

Miscellaneous, you will get to see a lot of things in every topic.

But pretty much that's all about media html.

Audio, video, media is that much

This is what you will use 95% of the times

Now I will give you a quick quiz

And your quick quiz is

Create a website which shows videos of different categories

And audios of different categories

You can use YouTube videos in an iframe

Using YouTube's embedding feature

so what you have to do is you have to make a website

in which you will get a lot of content, now you can use video audio tags and YouTube's

share feature, the way I have embedded this YouTube video, you can do the same

and make a very good website and show me, You can also give me a comment in the github.

And you can also

tell me the code.

But do attempt this quiz.

And do write sigma batch op in the comment section.

Access this playlist.

Like the video.

And do write sigma batch op.

That's all for this video.

Thank you so much for watching this video.

And I will see you next time.