How to use H5 to operate audio and video

Many friends know that audio and video can be operated in HTML5. Today I will teach you how to use H5 to operate audio and video. The following is a small case, let’s take a look at it

Audio/Video

audio Audio

Src= The "File Path"

controls attribute specifies that the browser should provide playback controls for audio

Supported formats for audio files:

Ogg mp3 wav

Other attributes:

autoplay

If this attribute appears, the audio will be played as soon as it is ready.

loop

Loop playback

If this attribute is present, playback will restart whenever the audio ends.

Resources

Video:

<video src="movie.ogg" controls="controls">
</video>
autoplay

If this attribute appears, the audio will be played as soon as it is ready.

loop

Loop playback

If this attribute is present, playback will restart whenever the audio ends.

Width: Width

Height: High

Generally use js to operate the attributes of video playback:

Autoplay: Understand: Automatically use tags < ;auto autoplay>

Js controls audio/video playback status:

currentTime Gets or sets the current time of the video

duration Returns the current video or The total audio time seconds

ended Whether the video audio ends

error object: Return the mediaerror object, use the code attribute to identify the error message

video .error.code

1. User terminated media_drr_aborted

2. Network error media_drr_network

3. Decoding error media_drrdecode

4. Invalid URL media_drr_src_not_supported

Muted Whether to mute Mute true Unmute false

Play() Play

Pause() Pause

I believe I saw it You have mastered the methods in these cases. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Related reading:

Implementation steps of using JS to operate HTTP Cookies

What is the common syntax of AJAX

How to use CSS parent and child levels

The above is the detailed content of How to use H5 to operate audio and video. For more information, please follow other related articles on the PHP Chinese website!