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
- <audio controls src=“Adele-Set Fire To The Rain.mp3”>
- The browser you are using does not support HTML5 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:
- <audio controls>
- <source src=“Adele-Set Fire To The Rain.mp3” >
- <source src=“Adele-Set Fire To The Rain.ogg” >
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
|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
|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.
|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.