Overview

You can add video elements to a web page using the HTML5 <video> tags.

Video TAGS

The <video> element requires a src attribute to specify the URL of the file. You can use a relative URL if the file is hosted on your site or you could use an absolute URL to access files hosted on another site. There are a number of other attributes you may want to use. These are listed below, along with a description of what each is used for.

ATTRIBUTES

• autoplay – Specifies that the video should start to play automatically when the page loads. In some browsers autoplay only works when the sound is muted. It does not work in some mobile browsers.
• controls – Tells the browser to supply controls for playback.
• height – specifies the height of the video element.
• loop – Tells the browser to keep repeating the video
• muted – specifies that the video should be silenced
• poster – specifies the URL of an image to display while loading.
• preload – tells the browser what to load when the page loads. You can choose from the following values.
  • none – tells the browser not to load the video until play is pressed.
  • auto – tells the browser to load the video on page load
  • metadata – tells the browser to collect information about the video, but not load the video until play is pressed.
• src – The value specifies the URL of the audio file.
• width – specifies the width of the video element.

Below is an example of a video element. The src value is a relative URL, since the file is hosted on this site. It utilizes the controls, autoplay, loop and muted attributes (no values are required for these).

<video src="/wp-content/uploads/2021/01/ray.mp4" controls autoplay loop muted></video>

Media Types

There are three types of video files you can use with the video tags.

• MP4 – This is the most commonly used file type and is supported by all modern browsers
• WebM – This file type is supported in most browsers at this time.
• Ogg – Currently not supported by Safari.

Source Tags

You can supply more than one video file by using source tags. Let’s say you want you use an Ogg file, but knowing that Safari does not support the Ogg file type, you may want to add a backup MP4 file as well. You can do this by supplying two <source> tags between the opening and closing video tags. The browser will try the first source and if it is unable to play, it will try the next. The source tags take the src and type attributes. Note, the src attribute is not needed on the opening video tag when using source tags.

<video controls autoplay muted>
  <source src="/wp-content/uploads/2021/01/waterfall.ogg" type="video/ogg" />
  <source src="/wp-content/uploads/2021/01/waterfall.mp4" type="video/mp4" />
  Your browser does not support html video tags.
</video>

Summary

Video can be added to a website using video tags. You can supply the source file using the src attribute on the opening video tag or by using source tags between the opening and closing video tags. You can supply multiple files using multiple source elements.