Summary of audio and video media playback elements in HTML5

Time:2021-10-26

Audio and video codec is a set of algorithms used to encode and decode a specific audio or video stream so that audio and video can be played. The volume of the original media file is very large. If it is not encoded, the data constituting a video and audio may be so large that it takes unbearable time to spread on the Internet. Without a decoder, the receiver cannot reorganize the encoded data into the original media data. The codec can read the specific container format and decode the audio track and video track.
Understanding media elements
1. Basic operation: declare media elements

XML/HTML CodeCopy contents to clipboard
  1. <audio controls src=“Adele-Set Fire To The Rain.mp3”>  
  2. The browser you are using does not support HTML5   audio
  3. </audio>  

The controls feature in the code tells the browser to display general user controls, including start, stop, skip and volume control. If the controls property is not specified, users will not be able to play audio on the page.
2. Using the source element
In the simplest case, the SRC attribute can point directly to the media file, but what if the browser does not support related containers or encoders? This requires an alternate declaration. The alternate declaration can contain multiple sources, and the browser can choose from so many sources:

XML/HTML CodeCopy contents to clipboard
  1. <audio controls>  
  2. <source  src=“Adele-Set Fire To The Rain.mp3” >  
  3. <source  src=“Adele-Set Fire To The Rain.ogg” >  
  4. </audio>  

For the source, the browser will judge according to the declaration order. If more than one source is supported, the browser will select the first supported source.
3. Media control
By setting the feature autoplay in the audio element or video element, no user interaction is required, and the audio or video files will be played automatically after loading.
Common control functions

function action
load() Load the audio / video file to prepare for playback. Generally, it does not need to be called, unless it is a dynamically generated element. Used to preload before playback.
play() Load (if necessary) and play audio / video files. Unless the audio / video has been paused in another location, it will play from the beginning by default
pause() Pauses audio / video files that are playing
canPlayType(type) Tests whether the video element supports files of the given MIME type

Read only media features

Read only feature value
duration Playback duration of the entire media file, in S. If the duration cannot be obtained, Nan is returned.
paused Returns true if the media file is currently paused. Returns false if playback has not started.
ended Returns true if the media file has been played
startTime Returns the earliest playback start time, usually 0.0, unless it is a buffered media file and part of the content is no longer in the buffer
error The error code returned when an error has occurred
currentSrc Returns the currently playing or loaded file as a string. Corresponds to the file selected by the browser in the source element.

Scriptable property values

characteristic value
autoplay Set the media file to play automatically after creation, or query whether it is set to autoplay
loop If the media file can be played again after playing, return true, or set the media file to cycle (or not cycle)
currentTime Returns the time from the start of playback to the present in S. During playback, set currenttime to search and locate the specific location of the media file
controls Show or hide the user control interface, or query whether the user control interface is currently visible
volume Set the relative value of audio volume between 0.0 and 1.0, or query the relative value of current volume.
muted Mute or unmute the audio file, or whether the gradient is currently muted
autobuffer Inform the player whether to load the buffer before the media file starts playing. If the media file is already set to autoplay, the test properties are ignored.

3.1 using audio and video elements
The HTML5 video element is very similar to the audio element, except that it has some more features than the audio element.

characteristic value
poster Before the video is loaded, the URL address of the picture representing the video content. You can imagine “movie poster”. This feature is not only readable, but also can be modified to replace the picture
width、height Read or set the display size. If the set width does not match the size of the video itself, it may result in centered display, and black strip areas may appear up, down, left and right.
videoWidth、videoHeight Returns the inherent or adaptive width and height of the video. The read-only video element also has a key feature that the audio element does not support: it can be called by the function of HTML5 canvas.

Tip: when canvas uses video as the drawing source, only the currently playing frame is drawn.