This way we can add video / Audio to Webpage Basic Understading
Inserting Video / Audio
Why we need to put video on webpage ? when we want to advertise or Promote any product then by adding video on webpage we can show these kind of adds , we can also add ower video on our portfolio website, so that our website becames more attractive . these are the major reagions of inserting video on Webpage.
Now a days Website Developer want to make their website more attractive and interactive. considering the media in website gaining popularity day by day. So Now we are going to Understand how to insert video on Webpage.
There are many Potential uses for adding video to a website-
- Educational content
- Marketing and advertising
- Entertaining and engaging visitors
- Providing Customers support
- Improving SEO
🔥Inserting Video
We can very easily Put video on our webpage, By using <video> tag. Initially Video tag look like.
<video src="">Your video is not supported</video><video> tag also uses some attributes for getting additional feature like Autoplay, video dimension.
- Src=” ” This attributes takes the actual or absolute path of Video, it may a link (video address )present on another website
- Controls This attribute Tells to browser that src attribute contains address of video and then browser Provides all buttons(play/pause, volume,timeline).
- autoplay This attribute provides autoplay feature to my video when page is loaded, but one thing keep it in your mind if you pause the video/audio then it will not autoplay even if you refresh page.
- height/weight These attributes will help you to change the dimension of video
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<video src="https://player.vimeo.com/progressive
_redirect/playback/883455384/rendition/360p/file.
mp4?loc=external&oauth2_token_id=1747418641&signature=
707afb0d802486a70764b132d0b59b73eccd56114dd24ad76c51a77811dee423"
controls autoplay width="505em">Your video is not supported</video>
<div>Here you can we can added video using video tag</div>
</body>
</html>
By this way we can easily add video to webpage , But there is another way to add video on webpage ! Let`s we discuss about second method of adding video.
In second Method we have option of Second Video, if due to any reason first video does not Played then second video plays automatically , this method provides a way to add multiple sources of video by using the <source> element.
<video controls>
<source src="https://player.vimeo.com/progressive_redirect/playback/904330474/rendition/360p/file.mp4?loc=external&oauth2_token_id=1747418641&signature=6b19458b0aab5d46e37614d463b20b3aa9ca4159f0e64fffdd61f969fe2f0858" >
<source src="https://player.vimeo.com/progressive_redirect/playback/880050363/rendition/360p/file.mp4?loc=external&oauth2_token_id=1747418641&signature=5f449696c58da7103b10cc33907987d07a0b958ba80198535b3ef63b006c0eeb" >
</video>🔥Inserting Audio
HTML provides a way to play audio on web pages through the <audio> element.The <audio> element is a self-closing tag, meaning it does not have a closing tag, and it is used to embed audio files in web pages.
The <audio> tag creates an audio player on a web page. Along with playing the audio, it supports media controls, like play, pause, volume, and mute. The browser will choose the first file with a file format that it supports. Supported audio file formats include MP3, WAV, and OGG.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<audio src="/DHARIA .mp3" controls autoplay loop>not playable</audio>
</body>
</html>
Attributes that audio tag uses for additional features same as Video —
- src
- Control
- muted
- autoplay
- Preloaded
Same as in Video Here can also add multiple sources of audio using <source> tag, in case the browser does not support the first one
<audio controls autoplay loop>
<source src="/DHARIA .mp3">
<source src="/DHARIA .WAV">
<source src="/DHARIA .OGG">
</audio>
