<video>,<audio>

Overview

The <video> element is used to load the video and is an instance of the HTMLVideoElement object. The <audio> element is used to load audio and is an instance of the HTMLAudioElement object. Both HTMLVideoElement and HTMLAudioElement inherit HTMLMediaElement, so these two HTML elements have many common attributes and methods, which can be introduced together.

In theory, these two HTML elements can be used directly by specifying the media file with the src attribute.

<audio src="background_music.mp3" />
<video src="news.mov" width="320" height="240" />

Note that the <video> element has a width attribute and a height attribute, you can specify the width and height. The <audio> element does not have these two attributes, because its player shape is given by the browser and cannot be specified.

In fact, different browsers support different media formats, and we have to use the <source> element to specify different formats of the same media file.

<audio id="music">
  <source src="music.mp3" type="audio/mpeg" />
  <source src="music.ogg" type='audio/ogg; codec="vorbis"' />
</audio>

When the browser encounters a supported format, it ignores the latter format.

Both of these elements have a controls property, and only when this property is turned on will the control bar be displayed. Note that if the <audio> element does not open the controls attribute, it will not be displayed at all, but will be played directly in the background.

HTMLMediaElement interface

HTMLMediaElement does not have a corresponding HTML element, but as the base class of <video> and <audio>, defining some of their common attributes and methods.

The HTMLMediaElement interface has the following attributes.

-HTMLMediaElement.audioTracks: returns an array-like object that represents the audio tracks contained in the media file. -HTMLMediaElement.autoplay: Boolean value, indicating whether the media file is automatically played, corresponding to the HTML attribute autoplay. -HTMLMediaElement.buffered: Returns a TimeRanges object, representing the content buffered by the browser. The length property of the object returns how many pieces of content are in the cache, the start(rangeId) method returns the time point when a specified piece of content (starting from 0) starts, and end() returns the end of a specified piece of content Point in time. This attribute is read-only. -HTMLMediaElement.controls: Boolean value, indicating whether to display the control bar of the media file, corresponding to the HTML attribute controls. -HTMLMediaElement.controlsList: returns an array-like object, indicating whether to display certain controls in the control bar. This object contains three possible values: nodownload, nofullscreen, and noremoteplayback. This attribute is read-only. -HTMLMediaElement.crossOrigin: A string indicating whether user information (such as Cookie) is attached to the cross-domain request, corresponding to the HTML attribute crossorigin. There are only two possible values ​​for this attribute: anonymous and use-credentials. -HTMLMediaElement.currentSrc: A string representing the absolute path of the media file currently being played. This attribute is read-only. -HTMLMediaElement.currentTime: Floating point number, representing the time point of the current playback. -HTMLMediaElement.defaultMuted: Boolean value, indicating whether the volume is turned off by default, corresponding to the HTML attribute muted. -HTMLMediaElement.defaultPlaybackRate: Floating point number, indicating the default playback rate, the default is 1.0. -HTMLMediaElement.disableRemotePlayback: Boolean value, whether to allow remote playback, that is, whether there will be a toolbar during remote playback. -HTMLMediaElement.duration: Floating point number, representing the length of time (in seconds) of the media file. If there is currently no media file, this attribute returns 0. This attribute is read-only. -HTMLMediaElement.ended: Boolean value, which indicates whether the current media file has finished playing. This attribute is read-only. -HTMLMediaElement.error: Returns the error object of the most recent error, if no error is reported, returns null. -HTMLMediaElement.loop: Boolean value, indicating whether the media file will be played in a loop, corresponding to the HTML attribute loop. -HTMLMediaElement.muted: Boolean value, indicating whether the volume is turned off. -HTMLMediaElement.networkState: The current network state, there are four possible values. 0 means that there is no data; 1 means that the media element is in the active state, but the download has not yet started; 2 means that it is downloading; 3 means that the media file is not found. -HTMLMediaElement.paused: Boolean value, indicating whether the media file is in a paused state. This attribute is read-only. -HTMLMediaElement.playbackRate: Floating point number, indicating the playback speed of the media file, 1.0 is the normal speed. If it is a negative number, it means playing backwards. -HTMLMediaElement.played: Returns a TimeRanges object, representing the media content being played. This attribute is read-only. -HTMLMediaElement.preload: A string indicating what content should be preloaded, possible values ​​are none, metadata and auto. -HTMLMediaElement.readyState: Integer, indicating the ready state of the media file, possible values ​​are 0 (no data), 1 (metadata has been obtained), 2 (the current frame can be played, but not enough to play multiple frames), 3 (Multiple frames can be played, at least two frames), 4 (can be played smoothly). This attribute is read-only. -HTMLMediaElement.seekable: Returns a TimeRanges object, representing the range of media content that a user can search. This attribute is read-only. -HTMLMediaElement.seeking: Boolean value, indicating whether the media file is looking for a new location. This attribute is read-only. -HTMLMediaElement.src: Boolean value, representing the URL of the media file, corresponding to the HTML attribute src. -HTMLMediaElement.srcObject: Returns the media file resource corresponding to the src attribute, which may be a MediaStream, MediaSource, Blob or File object. Specify this attribute directly to play the media file. -HTMLMediaElement.textTracks: returns an array-like object containing all text tracks. This attribute is read-only. -HTMLMediaElement.videoTracks: returns an array-like object containing multiple video tracks. This attribute is read-only. -HTMLMediaElement.volume: Floating point number, representing the volume. 0.0 means mute and 1.0 means maximum volume.

The HTMLMediaElement interface has the following methods.

-HTMLMediaElement.addTextTrack(): Add a text track (such as subtitles) to the media file. -HTMLMediaElement.captureStream(): Returns a MediaStream object, used to capture the stream content of the current media file. -HTMLMediaElement.canPlayType(): This method accepts a MIME string as a parameter to determine whether this type of media file can be played. This method returns a string with three possible values, probably means it seems to be playable, maybe means that it is impossible to judge whether it is playable without playing it, and an empty string means it cannot be played. -HTMLMediaElement.fastSeek(): This method accepts a floating point number as a parameter, which represents the specified time (in seconds). This method moves the media file to the specified time. -HTMLMediaElement.load(): Reload the media file. -HTMLMediaElement.pause(): Pause playback. This method has no return value. -HTMLMediaElement.play(): Start playing. This method returns a Promise object.

The following is an example of the play() method.

var myVideo = document.getElementById("myVideoElement");

myVideo
  .play()
  .then(() => {
    console.log("playing");
  })
  .catch((error) => {
    console.log(error);
  });

HTMLVideoElement interface

The HTMLVideoElement interface represents the <video> element. This interface inherits the HTMLMediaElement interface and has some properties and methods of its own.

Properties of the HTMLVideoElement interface.

-HTMLVideoElement.height: A string representing the height of the video playback area (in pixels), corresponding to the HTML attribute height. -HTMLVideoElement.width: A string representing the width of the video playback area (in pixels), corresponding to the HTML attribute width. -HTMLVideoElement.videoHeight: This property is read-only and returns an integer that represents the height of the video file itself (in pixels). -HTMLVideoElement.videoWidth: This property is read-only and returns an integer representing the width of the video file itself (in pixels). -HTMLVideoElement.poster: A string representing the URL of an image file, used to replace the display when the video file cannot be obtained, corresponding to the HTML attribute poster.

Methods of the HTMLVideoElement interface.

-HTMLVideoElement.getVideoPlaybackQuality(): returns an object that contains some data of the current video playback.

HTMLAudioElement interface

The HTMLAudioElement interface represents the <audio> element.

This interface inherits HTMLMediaElement, but does not define its own properties and methods. The browser natively provides an Audio() constructor, which returns an instance of HTMLAudioElement.

var song = new Audio([URLString]);

The Audio() constructor accepts a string as a parameter, which represents the URL of the media file. If this parameter is omitted, it can be specified later through the src attribute.

After generating the HTMLAudioElement instance, without inserting the DOM, you can directly use the play() method to play in the background.

var a = new Audio();
if (a.canPlayType("audio/wav")) {
  a.src = "soundeffect.wav";
  a.play();
}

Incident

The <video> and <audio> elements have the following events.

-loadstart: Triggered when the media file starts to be loaded. -progress: Triggered during the media file loading process, about 2 to 8 times per second. -loadedmetadata: triggered when the media file metadata is successfully loaded. -loadeddata: triggered after the current playback position is successfully loaded. -canplay: When enough data has been loaded, it can be triggered when playback can be started, and data may be requested later. -canplaythrough: When enough data has been loaded, it can be triggered when playing continuously, and there is no need to continue to request data later. -suspend: Triggered when enough data has been buffered and the download is temporarily stopped. -stalled: Triggered when trying to load data, but no data is returned. -play: Triggered when the play() method is called or when autoplay is started. If enough data has been loaded, this event will be followed by the playing event, otherwise the waiting event will be triggered. -waiting: Triggered when playback cannot be played or playback is stopped due to insufficient buffer data. Once the buffered data is enough to start playing, the playing event will follow. -playing: Triggered when the media starts to play. -timeupdate: triggered when the currentTime property changes, it may be triggered 4 to 60 times per second. -pause: triggered when the pause() method is called and playback is paused. -seeking: The script or the user requests to play a position that is not buffered, and it is triggered when the playback stops and starts to load data. At this time, the seeking property returns true. -seeked: Triggered when the seeking property changes back to false. -ended: Triggered when the media file is finished playing. -durationchange: Triggered when the duration property changes. -volumechange: triggered when the volume changes. -ratechange: trigger when the playback speed or the default playback speed changes. -abort: Triggered when the media file is stopped loading, usually when the user requests to stop the download. -error: triggered when the media file cannot be loaded due to network or other reasons. -emptied: Triggered when the networkState property becomes unable to obtain data due to the error or abort event.