A closer look at the video element in HTML

Detailed explanation of the video video tag in HTML

The video tag in HTML5 is a tag used to play videos on web pages. It can render videos using different formats, such as MP4, WebM, Ogg, and more. In this article, we will introduce the use of video tag in detail and provide specific code examples.

1. Basic structure
   The following is the basic structure of the video tag:

<video src="video.mp4" controls>
  Your browser does not support the video tag.
</video>

In the above example, we specified the path to the video file (video.mp4) , and added a controls attribute to display control buttons (play, pause, volume adjustment, etc.) above the video. If the browser does not support the video tag, fallback content will be displayed (Your browser does not support the video tag).

2. Detailed explanation of attributes
   2.1 src attribute
   The src attribute is used to specify the path of the video file. You can use relative or absolute paths. Example:

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

2.2 controls attribute
The controls attribute is used to display the control buttons of the video. Example:

<video src="video.mp4" controls>
</video>

2.3 width and height attributes
Use the width and height attributes to customize the width and height of the video. Example:

<video src="video.mp4" width="640" height="360">
</video>

2.4 autoplay attribute
Use the autoplay attribute to set the video to play automatically. Example:

<video src="video.mp4" autoplay>
</video>

2.5 loop attribute
Use the loop attribute to set the video to loop. Example:

<video src="video.mp4" loop>
</video>

2.6 muted attribute
Use the muted attribute to set the video to play silently. Example:

<video src="video.mp4" muted>
</video>

3. Supported video formats
   Although the video tag supports multiple video formats, the formats supported by different browsers may vary. The following are some commonly used video formats and corresponding browser support:

• MP4: supported by most browsers
• WebM: supported by most modern browsers
• Ogg: Firefox, Chrome and other browsers support

In order to ensure that the video can be played normally on different platforms and browsers, it is best to provide video sources in multiple formats at the same time:

<video>
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  <source src="video.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

4. Embedded subtitles
   By using the track tag, we can embed subtitle files in the video tag. Example:

<video controls>
  <source src="video.mp4" type="video/mp4">
  <track src="subtitles.vtt" kind="subtitles" label="English" srclang="en">
  Your browser does not support the video tag.
</video>

In the above example, we embedded a subtitle file (subtitles.vtt) using the track tag and added some related parameters (kind, label, srclang).

Summary:
Through the video tag, we can easily embed and play videos on web pages. We can use different attributes to control the automatic playback, looping, muting and other behaviors of the video. To ensure video compatibility, it is best to provide video sources in multiple formats at the same time. In addition, we can also embed subtitle files using the track tag.

Through the introduction of this article, I believe that readers have a deeper understanding of the video tag and can effectively apply it in their own web pages. Hope this article is helpful to you!

The above is the detailed content of A closer look at the video element in HTML. For more information, please follow other related articles on the PHP Chinese website!