Audio and video media playing elements in HTML5 _ html5 tutorial skills-

This article mainly introduces the summary of audio and video media playing elements in HTML5, which is the basic knowledge of multimedia development on website pages, you can refer to audio and video encoding/decoder as a set of algorithms to encode and decode a specific audio or video stream so that the audio and video can be played. The size of the original media file is very large. If you do not encode it, the data that makes up a video or audio file may be so huge that it takes an unbearable time to spread it over the Internet. If no decoder is available, the receiver cannot reorganize the encoded data into the original media data. The codecs can read specific container formats and decode audio tracks and video tracks.
Understand media elements
1. Basic operations: declare media elements

Copy XML/HTML Code to clipboard

2. Your browser does not support HTML5 audio

The controls feature in the Code tells the browser to display common user controls, including start, stop, jump, and volume control. If the controls attribute is not specified, the user cannot play the audio on the page.
2. Use the source Element
In the simplest case, you can direct the src attribute to a media file. But what if the browser does not support related containers or encoders? This requires the standby statement. The standby declaration can contain multiple sources, and the browser can select from so many sources:

Copy XML/HTML Code to clipboard

The browser determines the source in the declared order. If more than one type is supported, the browser selects the first supported source.
3. Media control
In the audio or video element, you can set the autoplay feature without any user interaction. audio or video files are automatically played after loading.
Common Control Functions

Function	Action
Load ()	Load audio/video files to prepare for playback. Generally, you do not need to call them unless they are dynamically generated elements. Used for pre-loading before playback.
Play ()	Load (if necessary) and play audio/video files. Unless the audio/video has been paused elsewhere, it is played from the beginning by default.
Pause ()	Pause audio/video files in the playing status
CanPlayType (type)	Test whether the video element supports a specified MIME type file

Read-Only media features

Read-only feature	Value
Duration	The playback duration of the entire media file, in seconds. If the length cannot be obtained, NaN is returned.
Paused	Returns true if the media file is currently paused. If playback is not started, false is returned.
Ended	Returns true if the media file has been played.
StartTime	Returns the earliest Playback Start Time, generally 0.0, unless it is a buffered media file, and part of the content is no longer in the buffer.
Error	Error Code returned when an error occurs
CurrentSrc	Returns the file that is currently being played or loaded as a string. Corresponds to the file selected by the browser in the source element.

Feature values that can be controlled by script

Features	Value
Autoplay	Set the media file to play automatically after creation, or check whether it is set to autoplay
Loop	Returns true if the media file can be played again after it is played, or sets it to loop playback (or non-loop playback)
CurrentTime	In seconds, the time taken from the start of playback to the present is returned. During playback, set currentTime to search and locate a media file.
Controls	Displays or hides the user control interface, or queries whether the user control interface is currently visible.
Volume	Set the relative value of the audio volume between 0.0 and 1.0, or query the relative value of the current volume.
Muted	Set mute for audio files or remove mute, or whether the layer is currently mute
Autobuffer	Notifies the player whether to buffer the media file before it starts playing. If the media file has been set to autoplay, the test feature is ignored.

3.1 use audio and video elements
The HTML5 video element is very similar to the audio element, but has some more features than the audio element.

Features	Value
Poster	Before the video is loaded, it represents the URL of the image of the video content. You can imagine the "movie poster ". This feature is readable and can be modified to replace images.
Width and height	Read or set the display size. If the specified width does not match the video size, the video may be displayed in the center, and black bar areas may appear between the upper and lower sides.
VideoWidth and videoHeight	Returns the inherent or adaptive width and height of the video. The read-only video element also has a key feature that is not supported by the audio element: it can be called by the HTML5 Canvas function.

Tip: When the canvas uses a video as the source for painting, only the currently played frame is drawn.