HTML Media Elements

HTML Media Elements
Nikhil
Published on 2021-07-02 03:51:20

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

HTML Tutorials Comments (8)

Leave a Comment

Your email address will not be published. Required fields are marked*

User Comments

html tutorial comments

panduranga gupta

2021-07-05 07:03:13

good website for learning and help me a lot

html tutorial comments

raju

2021-09-25 14:58:47

The awsome website i am looking like for a long time, good work atutorialhub team keep doing

html tutorial comments

Shivani

2021-09-01 15:03:56

Learning a lot from the courses present on atutorialhub. The courses are very well explained. Great experience

html tutorial comments

Harshitha

2021-09-10 15:05:45

It is very helpful to students and easy to learn the concepts

html tutorial comments

Sowmya

2021-09-14 15:06:41

Great job Tutorials are easy to understand Please make use of it

html tutorial comments

Zain Khan

2021-09-18 15:07:23

Great content and customized courses.

html tutorial comments

Rudrakshi Bhatt

2021-09-09 15:08:10

Well structured coursed and explained really well!

html tutorial comments

Pavana Somashekar

2021-09-11 15:09:08

Good platform for beginners and learn a lot on this website