HTML5 | Video

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 :

  1. Autoplay : It tells the browser to immediately start downloading the video and play it as soon as it can.
  2. Preload : It intends to provide a hint to the browser about what the author thinks will lead to the best user experience.
  3. Loop : It tells the browser to automatically loop the video.
  4. height & width : It sets the width and height of the video in CSS pixels.
  5. Controls : It shows the default video controls like play, pause, volume etc.
  6. Muted : It mutes the audio from the video.
  7. Poster : It loads an image to preview before the loading of the video.

Adding Video using HTML5 :

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output :




My Personal Notes arrow_drop_up

I am a technology enthusiast who has a keen interest in programming I am pursuing Engineering in Computer Science from GEU, Dehradun I like to unwind by watching movies and English sitcomsI have a keen interest in music

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.