Video, Audio & Media in HTML | Sigma Web Development Course - Tutorial #10
Summary
TLDRThis 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
📹 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.
🔊 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.
🖼️ 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.
Mindmap
Keywords
💡HTML
💡Video Element
💡Audio Element
💡Media Controls
💡Autoplay
💡Muted
💡Poster
💡SVG
💡Iframe
💡Preload Attribute
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.
関連動画をさらに表示
CLASS 8 | CHAPTER 9 | IMAGES, LINKS AND FRAMES IN HTML 5 | CYBER TOOLS | KIPS
HTML Tutorial #4: Images & File Paths | Web Development | Filipino | Tagalog
How to Insert Images in HTML | An HTML5 Image Tutorial
Integrasi Aplikasi Perkantoran dengan OLE | Materi Informatika Kelas 9 | Elemen Literasi digital
Figma To Real Website | Responsive Homepage | HTML, CSS & JavaScript | Part 11
How to Create Stunning Images from Text Fast and Effortlessly | Simplified AI | AI Text to Image
5.0 / 5 (0 votes)