HTML video Play video / multimedia video streaming

 

The <video> tag (tag) is used to play video or video streaming.

grammar:

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

<video> tag attributes (attributes):

• src: The address of the video (URL)
• poster: Specify a picture address as a preview of the video before it starts playing
• preload: Prompt the browser whether to preload the video. These values ​​can be used:
  • none: Do not preload, because the user may not play the audio, or you want to save more server bandwidth
  • metadata: First download the metadata of the video (such as the length of the video)
  • auto: The user is likely to play the video, you can download it first
• autoplay: Boolean attribute, which controls whether to play the video automatically, the default is false
• loop: Boolean attribute, which controls whether to play the movie repeatedly, the default is false
• muted: Boolean attribute, which controls whether to mute or not, the default is false
• controls: The boolean attribute, which specifies whether to display the video control panel, provided by the browser, there will be playback progress, pause button, play button, mute button, etc., the default is false
• width: A number, set the width of the video display area, the unit is pixel (pixel)
• height: A number, set the height of the video display area, the unit is pixel (pixel)

---

<video> audio source addresses except srcthe specified property can also be used in the <video> tag inside <source>the label set, you can use multiple <source> to specify a different format type of video source, and the browser they will have first pick Supported format to load.

The attributes of the <source> tag:

• src: Audio address (URL)
• type: The MIME type of the audio, may also be matched with codecs to specify the encoding format

Usage example:

<video controls>
    <source src="dogs.mp4" type="video/mp4; codecs='avc1, mp4a'">
    <source src="dogs.webm" type="video/webm; codecs='vp8.0, vorbis'">
</video>

<source> is an empty element without closing tag.

---

In <video>, you can also use the <track> tag to specify a text track-a timed text track. The actual use is like subtitles for a video. There can be multiple <track>s to specify different text tracks.

The attributes of the <track> tag:

• src: The file address of the text track, usually a WebVTT file
• srclang: The language of the text track, such as en, fretc.
• kind: Define how the text track should be used. Can have these values:
  • subtitles: Subtitle files, such as Chinese subtitles for English movies. default value
  • captions: Annotation of content, suitable for situations such as silence or excessive noise
  • descriptions: Introduction to the video, for screen reader
  • chapters: Chapter title, used when switching content
  • metadata: Invisible to users, for JavaScript
• label: When listing available tracks, give the track title to the browser
• default: Set as the default text track

Usage example:

<video controls poster="/images/sample.gif">
   <source src="sample.mp4" type="video/mp4">
   <source src="sample.ogv" type="video/ogv">
  
   <track kind="captions" src="sampleCaptions.vtt" srclang="en">
   <track kind="descriptions" src="sampleDescriptions.vtt" srclang="en">
   <track kind="chapters" src="sampleChapters.vtt" srclang="en">
   <track kind="subtitles" src="sampleSubtitles_de.vtt" srclang="de">
   <track kind="subtitles" src="sampleSubtitles_en.vtt" srclang="en">
   <track kind="subtitles" src="sampleSubtitles_ja.vtt" srclang="ja">
   <track kind="subtitles" src="sampleSubtitles_oz.vtt" srclang="oz">
   <track kind="metadata" src="keyStage1.vtt" srclang="en" label="Key Stage 1">
   <track kind="metadata" src="keyStage2.vtt" srclang="en" label="Key Stage 2">
   <track kind="metadata" src="keyStage3.vtt" srclang="en" label="Key Stage 3">
</video>

<track> is an empty element without closing tag.

---

In <video>, the content other than <source> and <track> will be regarded as fallback content, which will be displayed to the browser when the resource fails to load or the <video> tag is not supported.

<video controls>
    <source src="dogs.mp4" type="video/mp4; codecs='avc1, mp4a'">
    <source src="dogs.webm" type="video/webm; codecs='vp8.0, vorbis'">
  
    <p>Your browser does not support HTML 5 video</p>
</video>