HTML Media Elements
HTML Media Elements attributes and description
- width - Sets the element's width in pixels.
- height - Sets the element's height in pixels.
- <source> - Defines resources of the audio or video files
- track - Defines the text track for media elements
- controls - Displays controls
- autoplay - Automatically start playing the media
- loop - Plays the media in a repeated cycle
- muted - Plays the media without sound
- poster - Assigns an image to display until a video is loaded
HTML Audio Elements
HTML5 provides a new standard for embedding an audio file on a web page. You can embed an audio file to a page using the <audio> element:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Atutorialhub HTML media elements</title>
</head>
<body>
<audio controls>
<source src="file.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</body>
</html>
HTML Video Elements
You can embed also a video to a webpage using the <video> element:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello!</title>
</head>
<body>
<video width="500" height="700" controls>
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</body>
</html>
Using `<video>` and `<audio>` element to display audio/video content
Use the HTML or <audio> element to embed video/audio content in a document. The video/audio element contains one or more video/audio sources. To specify a source, use either the src attribute or the <source> element; the browser will choose the most suitable one.
Audio tag example:
<!-- Simple video example -->
<video src="videofile.webm" autoplay poster="posterimage.jpg">
Sorry, your browser doesn't support embedded videos,
but don't worry, you can <a href="videofile.webm">download it</a>
and watch it with your favorite video player!
</video>
<!-- Video with subtitles -->
<video src="foo.webm">
<track kind="subtitles" src="foo.en.vtt" srclang="en" label="English">
<track kind="subtitles" src="foo.sv.vtt" srclang="sv" label="Svenska"></video>
<!-- Simple video example -->
<video width="480" controls poster="https://archive.org/download/WebmVp8Vorbis/webmvp8.gif" >
<source src="https://archive.org/download/WebmVp8Vorbis/webmvp8.webm" type="video/webm">
<source src="https://archive.org/download/WebmVp8Vorbis/webmvp8_512kb.mp4" type="video/mp4">
<source src="https://archive.org/download/WebmVp8Vorbis/webmvp8.ogv" type="video/ogg">
Your browser doesn't support HTML5 video tag.
</video>
Example:
<!DOCTYPE html>
<html>
<head>
<title>Atutorialhub demo title</title>
</head>
<body>
<!-- Simple video example -->
<video src="videofile.webm" autoplay poster="posterimage.jpg">
Sorry, your browser doesn't support embedded videos,
but don't worry, you can <a href="videofile.webm">download it</a>
and watch it with your favorite video player!
</video>
<!-- Video with subtitles -->
<video src="foo.webm">
<track kind="subtitles" src="foo.en.vtt" srclang="en" label="English">
<track kind="subtitles" src="foo.sv.vtt" srclang="sv" label="Svenska">
</video>
<!-- Simple video example -->
<video width="480" controls poster="https://archive.org/download/WebmVp8Vorbis/webmvp8.gif">
<source src="https://archive.org/download/WebmVp8Vorbis/webmvp8.webm" type="video/webm">
<source src="https://archive.org/download/WebmVp8Vorbis/webmvp8_512kb.mp4" type="video/mp4">
<source src="https://archive.org/download/WebmVp8Vorbis/webmvp8.ogv" type="video/ogg">
Your browser doesn't support HTML5 video tag.
</video>
</body>
</html>
Audio tag example:
<!-- Simple audio playback -->
<audio src="http://developer.mozilla.org/@api/deki/files/2926/=AudioTest_(1).ogg" autoplay>
Your browser does not support the <code>audio</code> element.
</audio>
<!-- Audio playback with captions -->
<audio src="foo.ogg">
<track kind="captions" src="foo.en.vtt" srclang="en" label="English">
<track kind="captions" src="foo.sv.vtt" srclang="sv" label="Svenska">
</audio>
Example:
<!DOCTYPE html>
<html>
<head>
<title>Atutorialhub demo title</title>
</head>
<body>
<!-- Simple audio playback -->
<audio src="http://developer.mozilla.org/@api/deki/files/2926/=AudioTest_(1).ogg" autoplay>
Your browser does not support the <code>audio</code> element.
</audio>
<!-- Audio playback with captions -->
<audio src="foo.ogg">
<track kind="captions" src="foo.en.vtt" srclang="en" label="English">
<track kind="captions" src="foo.sv.vtt" srclang="sv" label="Svenska">
</audio>
</body>
</html>
HTML Video header or background
Adding a video that will autoplay on a loop and has no controls or sound. Perfect for a video header or background.
<!DOCTYPE html>
<html>
<head>
<title>Atutorialhub demo title</title>
</head>
<body>
<video width="1280" height="720" autoplay muted loop poster="video.jpg" id="videobg">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
<source src="video.ogg" type="video/ogg">
</video>
</body>
</html>
This CSS provides a fallback if the video cannot be loaded. Note that is it recommended to use the first frame of the video as the poster video.jpg.
#videobg {
background: url(video.jpg) no-repeat;
background-size: cover;
}
ATutorialHub Related Guide
-
AWS Amazon EC2-Deploy a MERN Stack application to AWS Amazon EC2Admin
AWS Amazon EC2-Deploy a MERN Stack application to AWS Amazon EC2 we are going to learn to Deploy MERN Application to aws Amazon EC2 set up a web server on the aws.2021-10-28 15:14:42 -
.png "Sea battle game only using HTML and CSS")
Sea battle game only using HTML and CSSAdmin
sea battle game where using only HTML and CSS and animation in css and html tags sea battle game2021-09-20 03:43:36
HTML Tutorials Comments (9)
User Comments
panduranga gupta
2021-07-05 07:03:13good website for learning and help me a lot
raju
2021-09-25 14:58:47The awsome website i am looking like for a long time, good work atutorialhub team keep doing
Shivani
2021-09-01 15:03:56Learning a lot from the courses present on atutorialhub. The courses are very well explained. Great experience
Harshitha
2021-09-10 15:05:45It is very helpful to students and easy to learn the concepts
Sowmya
2021-09-14 15:06:41Great job Tutorials are easy to understand Please make use of it
Zain Khan
2021-09-18 15:07:23Great content and customized courses.
Rudrakshi Bhatt
2021-09-09 15:08:10Well structured coursed and explained really well!
Pavana Somashekar
2021-09-11 15:09:08Good platform for beginners and learn a lot on this website
Sax
2021-09-25 19:35:50Nice website
Leave a Comment