HTML video and audio content

Audio and video in the web

  There are many new features in the HTML5 standard, including  <video> and  <audio> tags, as well as some  JavaScript  and  APIs  to control it.

<video> element

<video> Allows you to easily embed a video. A simple example is as follows:

<video src="rabbit320.webm" controls>
  <p>你的浏览器不支持 HTML5 视频。可点击<a href="rabbit320.mp4">此链接</a>观看</p>
</video>

Some of the attributes are as follows:

src

With  <img> the same label use, src attribute points among web pages you want to embed video resources, their use exactly the same way.

controls

The user must be able to control the video and audio playback functions. You can use  controls to include the control interface provided by the browser, and you can also use the appropriate  JavaScript API to  create your own interface. The interface must include at least the functions of starting, stopping, and adjusting the volume.

<video> Content inside the label

This is called fallback content  — when the browser does not support  <video> tags, this content will be displayed, which allows us to provide fallback content for old browsers. You can add any backup content. In this example, we provide a link to this video file so that users can at least access this file without being limited to browser support.

The web page style of the embedded video file is as follows:

 

Media files supported by the browser

<video controls>
  <source src="rabbit320.mp4" type="video/mp4">
  <source src="rabbit320.webm" type="video/webm">
  <p>你的浏览器不支持 HTML5 视频。可点击<a href="rabbit320.mp4">此链接</a>观看</p>
</video>

Now we remove the  src attribute from the  <video> label and put it in several separate labels  <source> . In this example, the browser will check the  <source> tag and play the first media that matches its own codec.

Each  <source> tab contains an  type attribute, this attribute is optional, but it is recommended that you add this attribute — it contains the MIME types of the video file   , and the browser will also check this attribute to quickly skip those that are not supported format. If you do not add  type attributes, the browser will try to load each file until it finds a format that can be played correctly, which will consume a lot of time and resources.

Note : You can check  the support of MIME types here ( HTML media format support )  .

Other <video> features

There are many <video> features you can use on HTML5  , please see our third example:

<video controls width="400" height="400"
       autoplay loop muted
       poster="poster.png">
  <source src="rabbit320.mp4" type="video/mp4">
  <source src="rabbit320.webm" type="video/webm">
  <p>你的浏览器不支持 HTML5 视频。可点击<a href="rabbit320.mp4">此链接</a>观看</p>
</video>

This string of code will show us the following page:

New features:

width with height

You can use attributes to control the size of the video, and you can also use  CSS  to control the size of the video. Either way, the video will maintain its original aspect ratio—also called the aspect ratio . If the size you set does not maintain the original aspect ratio of the video, the video border will be stretched, and the part that is not filled by the video content will display the default background color.

autoplay

This attribute will cause the audio and video content to play immediately, even if the other parts of the page are not fully loaded. It is recommended not to apply this attribute on your website, because users will be more disgusted with auto-playing media files.

loop

This attribute allows audio or video files to be played in a loop. The same is not recommended unless necessary.

muted

This attribute will cause the sound to be turned off by default when the media is playing.

poster

This attribute points to the URL of an image that will be displayed before the video is played. Usually used for rough previews or advertisements.

preload

This attribute is used to buffer larger files. There are 3 values ​​to choose from:

• "none" : No buffering
• "auto" : Cache media files after the page loads
• "metadata" : Only buffer the metadata of the file

You can click here to view the above example, or click here to view the source code. Note that we did not use the autoplay attribute in this version of the example — if the video starts playing as soon as the page loads, the effect of the poster attribute will not be seen.

 

<audio> Tag

<audio><video> The use of  labels and  labels is almost the same, there are some subtle differences such as the following different borders, a typical example is as follows:

<audio controls>
  <source src="viper.mp3" type="audio/mp3">
  <source src="viper.ogg" type="audio/ogg">
  <p>你的浏览器不支持 HTML5 音频，可点击<a href="viper.mp3">此链接</a>收听。</p>
</audio>

Replay media

At any time, you can call a load() method in Javascript  to reset the media. If there are multiple <source> media sources specified by  tags, the browser will reload the media starting from selecting the media source.

const mediaElem = document.getElementById("my-media-element");
mediaElem.load();

Audio track addition and deletion events

You can monitor the audio track in the media element. When the audio track is added or deleted, you can detect it by listening to related events. Specifically, by monitoring  AudioTrackList the  addtrack events of the HTMLMediaElement.audioTracks object (ie, the  object), you can respond to the increase in audio tracks in time.

const mediaElem = document.querySelector("video");
mediaElem.audioTracks.onaddtrack = function(event) {
  audioTrackAdded(event.track);
}

You can TrackEvent find more useful information in our  documentation.

Show audio track text

WebVTT is a format used to write text files. This text file contains a lot of strings. These strings will have some metadata. They can be used to describe the time when the string will be displayed in the video, or even Used to describe the style and positioning information of these strings. These strings are called  cues  . You can display different styles according to different needs. The most common ones are as follows:

subtitles

By adding translated subtitles, to help those who do not understand foreign languages ​​understand the content of the audio.

captions

Simultaneously translate the dialogue, or describe some sounds with important information, to help those who cannot listen to the audio understand the content in the audio.

timed descriptions

Convert text to audio to serve those with visual impairments.

A typical WebVTT file is as follows:

WEBVTT

1
00:00:22.230 --> 00:00:24.606
第一段字幕

2
00:00:30.739 --> 00:00:34.074
第二段

  ...

To display it with HTML media, you need to do the following:

1. Save the file with a .vtt extension.
2. Use  <track> tags to link .vtt files. The  <track> tag must be placed  <audio> or  <video> 标签当中, and must be placed after all <source> tags. Use  kind attributes to specify which type, such as subtitles, captions, descriptions. Then, use it  srclang to tell the browser what language you are writing subtitles in.

as follows:

<video controls>
    <source src="example.mp4" type="video/mp4">
    <source src="example.webm" type="video/webm">
    <track kind="subtitles" src="subtitles_en.vtt" srclang="en">
</video>

The above code will display a video with subtitles, as follows:

If you want to know more details, you can read  Adding captions and subtitles to HTML5 video .