HTML5 | Video

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 in 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 :

Browser MP4 WebM OGG
Google Chrome Yes Yes Yes
Internet Explorer Yes No No
Firefox Yes Yes Yes
Opera Yes Yes Yes
Safari Yes Yes No

Syntax :

 <video src="" controls>&lt/video>

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 :


Supported browser: The <audio> tag is supported by below browsers.

  • Google Chrome 4.0
  • Internet Explorer 9.0
  • Firefox 3.5
  • Opera 10.5
  • Safari 4.0


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.



Improved By : nidhi_biet