HTML5: How to specify the type of media resource?

Last update on February 12 2024 12:51:53 (UTC/GMT +8 hours)

Solution:

HTML Code:

<!DOCTYPE html><!-- Define document type as HTML -->
<html><!-- Begin HTML document -->
<head><!-- Start of document header -->
<meta charset="utf-8"><!-- Define character encoding -->
<title>How to specify the type of media resource</title><!-- Title of the HTML page -->
</head><!-- End of document header -->
<body><!-- Start of document body -->
<video width="320" height="240" controls><!-- Video element with specified width, height, and playback controls -->
<source src="https://www.w3resource.com/html-css-exercise/basic/solution/php-demo1.mp4" 
type="video/mp4" media="screen and (min-width:320px)"><!-- Source tag specifying the MP4 video file format with a media query -->
<source src="https://www.w3resource.com/html-css-exercise/basic/solution/php-demo1.ogg" 
type="video/ogg" media="screen and (min-width:320px)"><!-- Source tag specifying the Ogg video file format with a media query -->
</body><!-- End of document body -->
</html><!-- End of HTML document -->

Explanation:

This HTML code defines a webpage with a video element for playing video files.
The <video> tag sets the width and height of the video player and includes playback controls.
Two <source> tags are nested within the <video> element, each specifying a different video file source.
The src attribute in each <source> tag specifies the URL of the video file.
The type attribute in each <source> tag specifies the MIME type of the video file format. In this case, one source is for MP4 format (video/mp4), and the other is for Ogg format (video/ogg).
Additionally, the media attribute in each <source> tag includes a media query. This attribute allows specifying conditions under which the source should be used. In this example, it specifies that the source should be used only when the screen width is at least 320 pixels (screen and (min-width:320px)).
By providing multiple sources in different formats with associated media queries, the webpage ensures compatibility with various browsers and devices, as different browsers support different video formats. The media query helps in selecting the appropriate source based on the screen size, providing better responsiveness and user experience.

Live Demo:

See the Pen source-media-answer by w3resource (@w3resource) on CodePen.

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	Yes

Go to Exercise page