Shulou(Shulou.com)06/03 Report--

This article is about how to understand the audio and video media playback elements in HTML5. The editor thinks it is very practical, so I share it with you. I hope you can get something after reading this article.

Audio and video encoders / decoders are a set of algorithms used to encode and decode a particular audio or video stream so that audio and video can be played. The original media file is so large that if it is not encoded, the data that makes up a piece of video and audio may be so large that it takes an unbearable time to spread over the Internet. Without a decoder, the receiver cannot reorganize the encoded data into the original media data. The codec can read a specific container format and decode the audio and video tracks in it.

Understand media elements

1. Basic operation: declare media elements

XML/HTML Code copies content to the clipboard

The browser you are using does not support HTML5 audio

The controls feature in the code tells the browser to display common user controls, including start, stop, skip, and volume control. If you do not specify the controls property, the user will not be able to play the audio on the page.

2. Use the source element

In the simplest case, the src attribute points directly to the media file, but what if the browser doesn't support the relevant containers or encoders? This requires the use of a backup statement. Alternate declarations can contain multiple sources, and browsers can choose from so many sources:

XML/HTML Code copies content to the clipboard

For sources, the browser determines in the order of declaration, and if more than one is supported, the browser chooses the first source to support.

3. Control of the media

By setting the feature autoplay in the audio element or video element, the audio or video file will play automatically after loading without any user interaction.

Commonly used control functions

The function action load () loads the audio / video file in preparation for playback and is usually not called unless it is a dynamically generated element. Used to preload before playback. Play () loads (if necessary) and plays the audio / video file. Unless audio / video has been paused in another location, pause () pauses the audio / video file in the playback state by default, canPlayType (type) tests whether the video element supports files of a given MIME type

Read-only media featur

The read-only property value duration the playback time of the entire media file in s. If the length of time cannot be obtained, NaN is returned. Paused returns true if the media file is currently paused. If the playback has not started yet, return false. Ended if the media file has finished playing, return truestartTime 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 error code returned by the buffer error in the event of an error, currentSrc returns the file that is currently playing or loaded as a string. Corresponds to the file selected by the browser in the source element.

Scriptable property values

The property value autoplay sets the media file to play automatically after creation, or queries whether it has been set to autoplayloop. If the media file can be replayed after playback, it will return true, or set the media file to loop (or not loop) currentTime to return the time taken from the beginning to the present in s. During playback, set currentTime to search and navigate to a specific location of the media file controls to show or hide the user control interface, or query whether the user control interface is currently visible volume sets the relative value of the audio volume between 0.0 and 1.0, or queries the relative value of the current volume. Muted mutes or eliminates muting for audio files, or whether the gradual layer is currently muted autobuffer informs the player whether to buffer load the media file before it starts playing. If the media file is already set to autoplay, the test properties are ignored.

3.1Using 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.

The property value poster represents the URL address of the picture of the video content before the video is loaded. You can imagine a "movie poster". This feature is not only readable, but can also be modified to change the picture width, height to read or set the display size. If the width you set does not match the size of the video itself, it may lead to centered display, and black bars may appear up and down or left and right. VideoWidth and videoHeight return 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 functions of HTML5 Canvas.

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

The above is how to understand the audio and video media playback elements in HTML5. The editor believes that there are some knowledge points that we may see or use in our daily work. I hope you can learn more from this article. For more details, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.