HTML Video

❮ Previous Next ❯

The HTML element <video> is used to display a video on a webpage.

How it Works

The controls attribute includes video options such as play, pause, and volume.

It's smart to consistently include the width and height attributes. Without setting these attributes, the webpage may flicker as the video is being loaded.

The <source> part helps you choose different video files for the browser to pick from. The browser will go with the first format it recognizes.

The content enclosed by the <video> and </video> tags will show up exclusively on web browsers that do not have compatibility with the <video> feature.

HTML <video> Autoplay

To make a video play automatically, simply employ the autoplay attribute:

Insert muted right after autoplay to enable automatic video playback with muted audio.

HTML Video - Methods, Properties, and Events

The HTML DOM provides ways to control the <video> element by specifying its actions, characteristics, and triggers.

You can use this code to load, play, and pause videos. Additionally, you can set the duration and volume as needed.

There are events in the Document Object Model (DOM) that can let you know when a video starts playing, is paused, and so on.

<!DOCTYPE html>
<html>
  <body>
    <video width="400" controls>
      <source src="/assets/files/ocean.mp4" type="video/mp4">
      <source src="mov_bbb.ogg" type="video/ogg"> Your browser does not support HTML video.
    </video>
    </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <video width="320" height="240" autoplay>
      <source src="/assets/files/ocean.mp4" type="video/mp4">
      <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag.
    </video>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <video width="320" height="240" autoplay muted>
      <source src="/assets/files/ocean.mp4" type="video/mp4">
      <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag.
    </video>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <div style="text-align:center">
      <button onclick="playPause()">Play/Pause</button>
      <button onclick="makeBig()">Big</button>
      <button onclick="makeSmall()">Small</button>
      <button onclick="makeNormal()">Normal</button>
      <br>
      <br>
      <video id="video1" width="420">
        <source src="/assets/files/ocean.mp4" type="video/mp4">
        <source src="mov_bbb.ogg" type="video/ogg"> Your browser does not support HTML video.
      </video>
    </div>
    <script>
      var myVideo = document.getElementById("video1");

      function playPause() {
        if (myVideo.paused) myVideo.play();
        else myVideo.pause();
      }

      function makeBig() {
        myVideo.width = 560;
      }

      function makeSmall() {
        myVideo.width = 320;
      }

      function makeNormal() {
        myVideo.width = 420;
      }
    </script>
  </body>
</html>

❮ Previous Next ❯

HTML Basics

HTML Tags

HTML Attributes

HTML Graphics

HTML APIs

HTML DOM

HTML Audio/Video

HTML 5 MathML

HTML Video

How it Works

HTML <video> Autoplay

HTML Video - Methods, Properties, and Events

Web Development