Common attributes of HTML5's

In HTML5, the <video></video> element provides many commonly used properties to control the behavior and appearance of a video. These attributes allow developers to flexibly customize the video playback experience on the web page.

Controls

This is the most commonly used property that tells the browser to display the default controls (such as play, pause, volume, etc.). If you do not add this attribute, the video will not have any operating interface.
If you want to customize the control style or behavior, you usually omit controls and then implement a set of controls yourself in HTML and JavaScript.
For example:

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

autoplay

As the name suggests, autoplay allows the video to automatically start playing after loading. But it should be noted that for the sake of user experience, most modern browsers do not allow audio videos to be played automatically by default.
You can use it with the muted property so that it can automatically play even without interaction.
For example:

 <video autoplay muted>
  <source src="background-video.mp4" type="video/mp4">
</video>

Common practice: When using video as the background, you often use autoplay muted loop to achieve loop background video effects.

loop

loop attribute will automatically start again after the video is played. It is often used in display scenarios, such as website introduction videos or advertising titles.
Note: loop is a Boolean property that takes effect as long as it is written and does not require assignment.
For example:

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

preload

This property is used to prompt the browser whether the video content should be preloaded when the page is loading. Its values ??include: auto , metadata and none .

• auto : The browser decides when to load, usually loading the entire video file as quickly as possible
• metadata : only load metadata (such as duration)
• none : It does not load preload, it will only be loaded when the user clicks to play.

Sometimes you will see this writing method:

 <video preload="auto">
  <source src="movie.mp4" type="video/mp4">
</video>

However, the browser may adjust itself according to the network conditions and does not exactly follow your settings.

muted

In addition to using it with autoplay , muted can also exist alone, forcing the video to be silently played from the beginning.
Some websites will first automatically play videos in a mute manner, and then provide an unmute button. This approach is both in line with the browser policy and does not disturb the user.

There are some other attributes, such as:

• poster : Specify the cover image displayed before the video is loaded
• width / height : Set the video area size
• playsinline : Force inline video playback on mobile (rather than full screen)

Basically these are the common ones. Although the <video></video> tag looks simple, these attributes can be combined to meet the needs of most web videos.

The above is the detailed content of What are the common attributes for the element (e.g., controls, autoplay, loop)?. For more information, please follow other related articles on the PHP Chinese website!