Multimedia label

In addition to images, web pages can also place video and audio.

<video>

The <video> tag is a block-level element used to place the video. If the browser supports the loaded video format, it will display a player, otherwise it will display the child elements inside <video>.

<video src="example.mp4" controls>
  <p>
    Your browser does not support HTML5 video. Please download the
    <a href="example.mp4">video file</a>.
  </p>
</video>

In the above code, if the browser does not support the video in this format, the text prompt inside <video> will be displayed.

<video> has the following attributes.

  • src: URL of the video file.
  • controls: Whether the player displays the control bar. This attribute is a boolean attribute, no need to assign, as long as the attribute name is written, it means open. If you don't want to use the browser's default player, but want to use a custom player, don't use this attribute.
  • width: The width of the video player, in pixels.
  • height: The height of the video player, in pixels.
  • autoplay: Whether the video is played automatically, this attribute is a Boolean attribute.
  • loop: Whether the video is played in a loop, this attribute is a Boolean attribute.
  • muted: Whether to mute by default, this attribute is a boolean attribute.
  • poster: The URL of the cover image of the video player.
  • preload: Whether to buffer the video file before playing the video. This attribute is only suitable for situations where autoplay is not set. It has three values, namely none (no buffering), metadata (buffering only the metadata of the video file), and auto (can buffer the entire file).
  • playsinline: When the iPhone's Safari browser plays a video, it will automatically full screen. This property can prohibit this behavior. This attribute is a Boolean attribute.
  • crossorigin: Whether to load the video in a cross-domain way. It can take two values, namely anonymous (when cross-domain requests, do not send user credentials, mainly cookies), and use-credentials (send user credentials when cross-domain requests).
  • currentTime: Specify the current playback position (double-precision floating point number, in seconds). If the playback has not yet started, it will start playing from the position specified by this attribute.
  • duration: This attribute is read-only, indicating the continuous playback time (total length) on the timeline, and the value is a double-precision floating point number (in seconds). If it is streaming, there is no known end time, and the attribute value is +Infinity.

Below is an example.

<video width="400" height="400" autoplay loop muted poster="poster.png"></video>

In the above code, the size of the video player is 400 x 400, it will automatically play and loop, and it will be muted, and it also has a cover image. This is a common way of writing the background video on the homepage of a website.

The HTML standard does not specify which video formats the browser needs to support, and it is entirely up to the browser manufacturer to decide. In order to avoid that the browser does not support the video format, you can use the <source> tag to place multiple formats of the same video.

<video controls>
  <source src="example.mp4" type="video/mp4" />
  <source src="example.webm" type="video/webm" />
  <p>
    Your browser does not support HTML5 video. Please download the
    <a href="example.mp4">video file</a>.
  </p>
</video>

In the above code, the value of the type attribute of the <source> tag is the MIME type of the video file. The above example specifies two formats of video files: MP4 and WebM. If the browser supports MP4, it will load the video in MP4 format and do not proceed further. If it does not support MP4, check whether it supports WebM, if it still does not support, then display a prompt.

<audio>

The <audio> tag is a block-level element used to place audio, and its usage is basically the same as the <video> tag.

<audio controls>
  <source src="foo.mp3" type="audio/mp3" />
  <source src="foo.ogg" type="audio/ogg" />
  <p>
    Your browser does not support HTML5 audio, please download the
    <a href="foo.mp3">audio file</a> directly.
  </p>
</audio>

In the above code, the <audio> tag uses the <source> tag inside to specify two audio formats: MP3 format is preferred, and Ogg format is used if the browser does not support it. If the browser cannot play audio, provide a download link.

The attributes of the <audio> tag are similar to the <video> tag, see the previous section.

-autoplay: Whether to play automatically, boolean attribute. -controls: Whether to display the playback toolbar, boolean attribute. If it is not set, the browser will not display the playback interface, which is usually used for background music. -crossorigin: Whether to use cross-domain requests. -loop: Whether to loop or not, boolean attribute. -muted: Whether to mute or not, boolean attribute. -preload: Buffer settings for audio files. -src: Audio file URL.

<track>

The <track> tag is used to specify the subtitle of the video, the format is WebVTT (.vtt file), and it is placed inside the <video> tag. It is a single-use tag, there is no end tag.

<video controls src="sample.mp4">
  <track label="English" kind="subtitles" src="subtitles_en.vtt" srclang="en" />
  <track
    label="Chinese"
    kind="subtitles"
    src="subtitles_cn.vtt"
    srclang="cn"
    default
  />
</video>

The above code specifies the English subtitles and Chinese subtitles of the video file.

The <track> tag has the following attributes.

-label: The name of the subtitle displayed by the player for the user to choose. -kind: the type of subtitles, the default is subtitles, which means that the original sound is translated into foreign text, such as English video providing Chinese subtitles. Another common value is captions, which represents the textual description of the original sound, usually in the original language of the video. For example, English videos provide English subtitles. -src: The URL of the vtt subtitle file. -srclang: The language of the subtitles, which must be a valid language code. -default: Whether to open by default, boolean attribute.

<source>

The <source> tag is used inside <picture>, <video>, and <audio> to specify an external resource. Single tags are used alone, and there is no end tag.

It has the following attributes, please refer to the corresponding container label for specific examples.

-type: Specify the MIME type of the external resource. -src: Specify the source file, used for <video> and <audio>. -srcset: Specify image files loaded under different conditions for <picture>. -media: Specify a media query expression, used in <picture>. -sizes: Specify the display size of different devices, used for <picture>, and must be used with srcset.

<embed>

The <embed> tag is used to embed external content, which is usually controlled by a browser plug-in. Due to the inconsistency of browser default plug-ins, it is possible that not all browser users can access this part of the content. It is recommended to use it with caution.

The following is an example of an embedded video player.

<embed
  type="video/webm"
  src="/media/examples/flower.mp4"
  width="250"
  height="200"
/>

The video embedded in the above code will be controlled by the browser plug-in. If the MP4 plug-in is not installed in the browser, the video cannot be played.

The <embed> tag has the following general attributes.

-height: Display height, the unit is pixel, percentage is not allowed. -width: Display width, in pixels, percentage is not allowed. -src: The URL of the embedded resource. -type: The MIME type of the embedded resource.

The browser obtains the MIME type of the embedded resource through the type attribute. Once the type has been registered by a plug-in, it will start the plug-in and be responsible for processing the embedded resource.

The following is an example of QuickTime plug-in playing MOV video files.

<embed type="video/quicktime" src="movie.mov" width="640" height="480" />

The following is an example of starting the Flash plugin.

<embed
  src="whoosh.swf"
  quality="medium"
  bgcolor="#ffffff"
  width="550"
  height="400"
  name="whoosh"
  align="middle"
  allowScriptAccess="sameDomain"
  allowFullScreen="false"
  type="application/x-shockwave-flash"
  pluginspage="http://www.macromedia.com/go/getflashplayer"
/>

In the above code, if the browser does not have the Flash plug-in installed, it will be prompted to download from the URL specified by the pluginspage property.

<object>, <param>

The function of the <object> tag is similar to that of <embed>. It also inserts external resources and is handled by the browser plug-in. It can be regarded as a substitute for <embed>, has standardized behavior, is limited to inserting a few general resources, and has no historical issues, so it is more recommended.

The following is an example of inserting a PDF file.

<object
  type="application/pdf"
  data="/media/examples/In-CC0.pdf"
  width="250"
  height="200"
></object>

In the above code, if the browser has a PDF plug-in installed, the PDF browser window will be displayed on the web page.

<object> has the following general properties.

-data: The URL of the embedded resource. -form: The id attribute of the associated form in the current webpage (if any). -height: The display height of the resource, the unit is pixel, and percentage cannot be used. -width: The display width of the resource, in pixels, and percentages cannot be used. -type: The MIME type of the resource. -typemustmatch: Boolean attribute, indicating whether the data attribute and the type attribute must match.

The following is an example of inserting a Flash movie.

<object data="movie.swf" type="application/x-shockwave-flash"></object>

The <object> tag is a container element, and the <param> tag can be used inside to give the operating parameters required by the plug-in.

<object data="movie.swf" type="application/x-shockwave-flash">
  <param name="foo" value="bar" />
</object>