Before HTML 5 came into existence, videos could only be played in a browser using a plug in 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 in a web page.
The table below specifies the first version of each web browser that fully supported the “video” tag :
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 :
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 & width : It sets the width and height 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.
Adding Video using HTML5 :
<!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 :
Code Explanation :
- 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.
Autoplaying a Video using HTML5 :
To start a video automatically use the autoplay attribute.
<!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 :
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.
<!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><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> </body> </html> |
Output :
leave a comment
0 Comments