HTML5 Video

12 Jun, 2022
In this article, we will know HTML5 Video, along with knowing the different ways to add the videos to the HTML page & understanding its implementation through the examples. Before HTML 5 came into existence, videos could only be played in a browser using a plugin like flash. But after the release of HTML 5, adding a video to a webpage is as easy as adding an image. The HTML5 “video” element specifies a standard way to embed a video on a web page. 
There are three different formats that are commonly supported by web browsers – mp4, Ogg, and WebM. The table below lists the formats supported by different browsers:
Syntax:
 <video src="" controls>   </video>
Attributes that can be used with the “video” tag are listed below :
Autoplay: It tells the browser to immediately start downloading the video and play it as soon as it can.Preload: It intends to provide a hint to the browser about what the author thinks will lead to the best user experience.Loop: It tells the browser to automatically loop the video.height: It sets the height of the video in CSS pixels.width: It sets the width of the video in CSS pixels.Controls: It shows the default video controls like play, pause, volume, etc.Muted: It mutes the audio from the video.Poster: It loads an image to preview before the loading of the video.src: It is used to specify the URL of the video file.
Autoplay: It tells the browser to immediately start downloading the video and play it as soon as it can.
Preload: It intends to provide a hint to the browser about what the author thinks will lead to the best user experience.
Loop: It tells the browser to automatically loop the video.
height: It sets the height of the video in CSS pixels.
width: It sets the width of the video in CSS pixels.
Controls: It shows the default video controls like play, pause, volume, etc.
Muted: It mutes the audio from the video.
Poster: It loads an image to preview before the loading of the video.
src: It is used to specify the URL of the video file.
Example: This example illustrates the use of <video> tag where we have used preload attribute whose value is set to auto which specifies the browser should load the entire video when the page loads.
HTML
<!DOCTYPE html><html><body>    <center>        <h1 style="color:green;">GeeksforGeeks</h1>        <h3>HTML video tag</h3>           <p>Adding video on the webpage               <p>                <video width="450"                       height="250"                       controls                       preload="auto">                    <source src="https://media.geeksforgeeks.org/wp-content/uploads/20190616234019/Canvas.move_.mp4"                       type="video/mp4">                    <source src="https://media.geeksforgeeks.org/wp-content/uploads/20190616234019/Canvas.move_.ogg"                       type="video/ogg">                </video>    </center></body></html>
Output:
We will understand the various ways to implement the <video> tag, through the examples.
Adding Video using HTML5:
Example: This simple example illustrates the use of the <video> tag in HTML. Here, the controls attribute is used to add controls like play, pause, volume, etc, & the “source” element is used to specify the video that the browser will choose to play.
HTML
<!DOCTYPE html><html><body>       <p>Adding Video on my webpage </p>        <video width="400"           height="350"           controls>        <source src="myvid.mp4"                type="video/mp4">        <source src="myvid.ogg"                type="video/ogg">    </video></body></html>
Output:
Video addition to the HTML.
Autoplaying a Video using HTML5: In order to start a video automatically, we can use the autoplay attribute.
Example: This example illustrates the use of the autoplay attribute in the HTML <video> tag.
HTML
<!DOCTYPE html><html><body>       <p>Adding Video on my webpage</p>        <video width="400"           height="350"           autoplay>        <source src="myvid.mp4" type="video/mp4">        <source src="myvid.ogg" type="video/ogg">    </video></body></html>
Output:
Autoplay attribute
Please refer to the How to display video controls in HTML5? article for knowing the various available controls in detail.
HTML Video using JavaScript: Many properties and events can be set for a video like load, play and pause videos, as well as setting duration and volume.
Example: In this example, we have used Javascript in order to play, pause & set the volume & duration of the video in HTML.
HTML
<!DOCTYPE html><html><body>    <div style="text-align:center">        <button onclick="Pauseplay()">Pause/Play</button>        <button onclick="Big()">Big</button>        <button onclick="Small()">Small</button>        <button onclick="Normal()">Normal</button>        <br>        <video id="myvideo" width="450">            <source src="myvid.MP4"                    type="video/mp4">            <source src="myvid.ogg"                    type="video/ogg">        </video>    </div>    <script>        var testvideo = document.getElementById("myvideo");         function Pauseplay() {            if(testvideo.paused) testvideo.play();            else testvideo.pause();        }         function Big() {            testvideo.width = 600;        }         function Small() {            testvideo.width = 300;        }         function Normal() {            testvideo.width = 450;        }    </script></body></html>
Output:
Setting the various video controls using the Javascript events & properties in HTML
Supported browsers: 
Google Chrome 3 and above
Internet Explorer 9 and above
Microsoft Edge 12 and above
Firefox 3.5 and above
Opera 10.5 and above
Safari 3.1 and above
nidhi_biet
shubhamyadav4
bhaskargeeksforgeeks
sweetyty
satyamm09
HTML-Tags
HTML5
HTML
Technical Scripter
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to update Node.js and NPM to next version ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
REST API (Introduction)
Hide or show elements in HTML using display property
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?
CSS to put icon inside an input element in a form
Types of CSS (Cascading Style Sheet)
Design a Tribute Page using HTML & CSS