|
Web design often has a feature of including a video that starts to play as soon as the web page loads. This effect can be achieved using HTML5 <video> element with the autoplay attribute. In this way, videos start playing without any user interaction hence improving the multimedia experience on websites.
Approach- HTML5 <video> element is utilized to insert video in your web page directly it supports different attributes that define how the video should be displayed and played.
- This will enable videos to begin playing automatically as soon as the webpage opens by adding an autoplay attribute to the <video>.
- use the <source> element within the <video> tag to specify your video file. The src attribute denotes where exactly your video files are located while the type attribute shows its MIME type.
- With controls attributes included, various playback functions like play, pause, volume control among others will be available for users.
Syntax:<video autoplay controls>
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video> Example 1: The example below shows how to add an autoplay video in HTML. The <video> tag includes the autoplay and controls attributes, enabling the video to start playing automatically with user controls for playback.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>Autoplay Video With Control Example</title>
</head>
<body>
<h2 style="color: green">GeeksforGeeks</h2>
<h3> How to add Autoplay Video With Control </h3>
<video autoplay controls>
<source src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240517010406/Autoplay-Video-2.mp4"
type="video/mp4">
Your browser does not support the video tag.
</video>
</body>
</html>
Output:
Example 2: The example below shows how to add an autoplay video in HTML with the muted attribute. The <video> tag includes autoplay and muted attributes, enabling the video to start playing automatically without sound.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>Autoplay Video WithOut Control Example</title>
</head>
<body>
<h2 style="color: green">Autoplay Video Example</h2>
<h3> How to add Autoplay Video WithOut Control </h3>
<video autoplay muted>
<source src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240517010406/Autoplay-Video-2.mp4"
type="video/mp4">
Your browser does not support the video tag.
</video>
</body>
</html>
Output:
|
-(1)-660.png){kind=small}
