Add video in HTML5

Make a movie

Use a smartphone or laptop to film a short video clip. Include some audio. You could even mix up your own clip with a soundtrack using software such as Clip Champ!

Copy the video file to your web folder. Common video file formats are MP4, OGG & WEBM

Basic syntax

The basic syntax for the <video> tag is as follows:

<video>
    <source src="video.mp4" type="video/mp4>
</video>

Additional options

The following attributes apply to the <video> tag:

• width
• height
• controls (boolean)
• autoplay (boolean)
• muted (boolean)

<video width="320" height="240" controls>
    <source src="myvideo.mp4" type="video/mp4">
</video>

The width and height must be specified for the same reason the width and height of an image needs to be specified. These physical dimensions, Frame width & Frame height, can be found by right-clicking the video file and selecting the Details tab from the file Properties option. The attribute values are expressed in numbers and the default unit is pixels.

The controls attribute results in the video player controls being displayed. Removing this prevents the video from playing. A user must right-click the video and select Show all controls to be able to play the video.

The autoplay attribute controls whether the user must click the play button or not.

The mute attribute controls whether the sound is on or off by default when the video plays.

Your user may have other ideas. Modern browsers have attempted as far as possible to allow users to control what happens in the browser on their computer — which is understandable. So, most browsers can prevent video and audio from playing automatically.

Source(s)

If you add multiple <source> options, the browser will attempt to play them starting with the first one in the list. If the browser is incapable of playing the first source file listed, it attempts to play the next source file listed.

<video width="320" height="240" controls>
    <source src="myvideo.mp4" type="video/mp4">
    <source src="myvideo.ogg" type="video/ogg">
</video>

Computer Browser says no.

In the event the browser cannot play your video, you can supply a custom text message to the user:

<video width="320" height="240" controls>
    <source src="myvideo.mp4" type="video/mp4">
    <source src="myvideo.ogg" type="video/ogg">
    Computer Says No. Your browser does not support the video tag.
</video>

Unlike with the <img> tag, where if the image file is not available for some reason the alt text is displayed, the custom message will not display if the video file is unavailable.