How to embed a Video in HTML?

The HTML Video element "video" embeds a media player which supports video playback into the document. You can use "video" for audio content as well, but the <audio> element may provide a more appropriate user experience.

HTML Demo: "video"

<video controls width="250"> 
<source src="/media/examples/flower.webm" type="video/webm" width="460px"> 
<source src="/media/examples/flower.mp4" type="video/mp4">
 Sorry, your browser doesn't support embedded videos. </video>

The above example shows simple usage of the "video" element. In a similar manner to the "img" element, we include a path to the media we want to display inside the src attribute; we can include other attributes to specify information such as video width and height, whether we want it to autoplay and loop, whether we want to show the browser's default video controls, etc.

The content inside the opening and closing "/video" tags is shown as a fallback in browsers that don't support the element.

Browsers don'gt all support the same video formats; you can provide multiple sources inside nested >source< elements, and the browser will then use the first one it understands:

<video controls> <source src="myVideo.mp4" type="video/mp4"> <source src="myVideo.webm" type="video/webm">

Your browser doesn't support HTML5 video. Here is a link to the video instead.

>/video>
 

Other usage notes:

If you don't specify the controls attribute, the video won't include the browser's default controls; you can create your own custom controls using JavaScript and the HTMLMediaElement API. See Creating a cross-browser video player for more details.

To allow precise control over your video (and audio) content, HTMLMediaElements fire many different events.

You can use the object-position property to adjust the positioning of the video within the element's frame, and the object-fit property to control how the video's size is adjusted to fit within the frame.

To show subtitles/captions along with your video, you can use some JavaScript along with the

element and the WebVTT format. See Adding captions and subtitles to HTML5 video for more information.

A good general source of information on using HTML "video" is the Video and audio content beginner's tutorial.

Attributes

autoplay : A Boolean attribute; if specified, the video automatically begins to play back as soon as it can do so without stopping to finish loading the data.

autoPictureInPicture : An experimental Boolean attribute which if true indicates that the element should automatically toggle picture-in-picture mode when the user switches back and forth between this document and another document or application.

buffered : An attribute you can read to determine the time ranges of the buffered media. This attribute contains a Time Ranges object.

controls : If this attribute is present, the browser will offer controls to allow the user to control video playback, including volume, seeking, and pause/resume playback.

controlslist : The controlslist attribute, when specified, helps the browser select what controls to show on the media element whenever the browser shows its own set of controls (e.g. when the controls attribute is specified).

crossorigin : This enumerated attribute indicates whether to use CORS to fetch the related image. CORS-enabled resources can be reused in the "canvas" element without being tainted. The allowed values are:

anonymous Sends a cross-origin request without a credential. In other words, it sends the Origin: HTTP header without a cookie, X.509 certificate, or performing HTTP Basic authentication. If the server does not give credentials to the origin site (by not setting the Access-Control-Allow-Origin: HTTP header), the image will be tainted, and its usage restricted.

use-credentials Sends a cross-origin request with a credential. In other words, it sends the Origin: HTTP header with a cookie, a certificate, or performing HTTP Basic authentication. If the server does not give credentials to the origin site (through Access-Control-Allow-Credentials: HTTP header), the image will be tainted and its usage restricted.

When not present, the resource is fetched without a CORS request (i.e. without sending the Origin: HTTP header), preventing its non-tainted used in "canvas" elements. If invalid, it is handled as if the enumerated keyword anonymous was used. See CORS settings attributes for additional information.

current Time Reading current Time returns a double-precision floating-point value indicating the current playback position of the media specified in seconds. If the media has not started playing yet, the time offset at which it will begin is returned. Setting current Time sets the current playback position to the given time and seeks the media to that position if the media is currently loaded.

If the media is being streamed, it's possible that the user agent may not be able to obtain some parts of the resource if that data has expired from the media buffer. Other media may have a media timeline that doesn't start at 0 seconds, so setting currentTime to a time before that would fail. The getStartDate() method can be used to determine the beginning point of the media timeline's reference frame.