Example Usage of HTML Video
1. Adding Video with Preload
Example: We have embedded the HTML video along with the source link and preload functionality.
HTML
<!DOCTYPE html><html><body> <center> <h1 style="color:green;">w3wiki</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.w3wiki.org/wp-content/uploads/20190616234019/Canvas.move_.mp4" type="video/mp4"> <source src="https://media.w3wiki.org/wp-content/uploads/20190616234019/Canvas.move_.ogg" type="video/ogg"> </video> </center></body></html> |
Output:
2. 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.
3. Autoplaying a Video using HTML5
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.
4. 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
HTML Video
The <video> element in HTML allows you to embed video content directly into web pages. It supports various video formats, including MP4, WebM, and Ogg. In this guide, we’ll learn about the key features of HTML5 video. video and audio tags are introduced in HTML5.
Contact Us