<video>

HTML <video> Tag

The <video> tag is one of the HTML5 elements. It is used to embed video in an HTML document. Browsers don’t all support the same video formats, so you should provide multiple video formats for correct rendering. A path to the video file is nested inside the <source> tag, or src attribute.

You can also include an alternate text in the <video> tag, that will be displayed in the case when the browser doesn’t support the video format.

There are 3 supported video formats for the <video> element: MP4/MPEG 4, WebM, and Ogg. For the compression/decompression of large video files special programs, codecs, are used.

MP4/MPEG 4 files are used with H264 video and AAC audio codecs, WebM files - with VP8 video codec and Vorbis audio codec; and Ogg files - with Theora video codec and Vorbis audio codec.

To provide controllability over a video and/or audio content, you can use different events. Such events allow monitoring the progress of media download and playback, as well as the playback position and state.

To change the positioning of the video within the frame of the element, you can use the CSS object-position property. If you want to control how the video’s size is changed to fit within the frame, use the object-fit property.

You can add subtitles/captions to your video using JavaScript with the <track> element and the WebVTT format. You can also play audio files using <video> which can be useful in some cases.

There isn’t any specific consideration for styling <video>. Generally, the CSS display property is used for this purpose.

Syntax

Syntax

The <video> tag comes in pairs. The content is written between the opening (<video>) and closing (</video>) tags.

Example of the HTML <video> tag with the controls, muted and src attributes:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      video{
        width: 300px; 
        height: 200px;
        border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <video controls muted src="/build/videos/arcnet.io(7-sec).mp4">
      <track default kind="subtitles" srclang="en" src="/build/videos/arcnet.io(7-sec).mp4"/>
    </video>
    <p>Some information about video</p>
  </body>
</html>

Example of the HTML <video> tag with the controls attribute:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      video {
        width: 300px;
        height: 220px;
        border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <video controls>
      <source src=”http://techslides.com/demos/sample-videos/small.ogv” type="video/ogg">
      <source src="/build/videos/arcnet.io(7-sec).mp4" type="video/mp4">
    </video>
    <p>Some information about video</p>
  </body>
</html>

The controls, autoplay and loop attributes are Boolean attributes, and do not accept values. If specified, they are on by default.

Attributes

Attributes

AttributesValueDescription
autoplayautoplaySpecifies that the video will start playing automatically as soon as it is ready.
controlscontrolsDisplays controls element allowing the user to control video playback, including volume, seeking, and pause/resume playback.
heightpixelsSets the height of the video player.
looploopSpecifies that the video will start over again, every time it is finished
mutedmutedSpecifies that the video will be initially silenced.
posterURLSets an image that will be shown while the video is downloading, or until the user hits the play button.
preloadProvides a hint to the browser regarding what content is loaded before the video is played:
autoThe whole video file can be downloaded.
metadataVideo metadata (e.g. length) is fetched.
noneThe video should not be preloaded.
The attribute is ignored is autoplay is enabled.
srcURLSets the URL of the embedded video. The <source> element can be used instead to specify the video to embed.
widthpixelsSets the width of the player.

The <video> tag supports the Global Attributes and the Event Attributes.



请遵守《互联网环境法规》文明发言,欢迎讨论问题
扫码反馈

扫一扫,反馈当前页面

咨询反馈
扫码关注
返回顶部