Summary of basic knowledge about HTML5 video

1. Basic attributes of the video tag

1.autoplay="autoplay": Specifies that the video will start playing as soon as it is ready

2.control="controls": Let the browser play the video The player provides default controls such as pause and progress bar. If this is set, self-defined controls cannot be used.

3.width="320" height="240": Define the width and height of the video player. Setting this will allow the page to reserve part of the space for the video player. If it is not set, it will not be retained at the beginning, which may cause Page layout confusion

4.loop="loop": Specifies the end of the video Playback will then restart

5.preload attribute: auto means loading the entire video after the page is loaded; meta only loads metadata; none: does not load the video

6.src: regulations The url of the video to be played, supported video formats: MP4/WebM/Ogg

2. Video commonly usedAPI

1.currentTime: Indicates the current playback time, which can be modified through js operations and reflected in the playback progress

2.load() method: load the video; play() method: play the video; pause () method: pause the video

3.volume: indicates the current sound size, which can be adjusted through js

4.muted: true means mute, false means not mute

5.playbackRate: Set the playback speed. The default is 1, which means playback in 1 second.

3. Use js to control the video instance

Get the corresponding< through the element selector ;video>Element: var myVideo = document.getElementById("video")

myVideo.play(): Let the video start playing; myVideo.pause(): Let the video stop playing

You can set the size of the video through myVideo.height and myVideo.width

4. Source tag

e02da388656c3265154666b7c71a8ddc settings can be placed within the 39000f942b2545a5315c57fa3276f220 Multiple video resources can be in different formats of the same video resource, as follows:

<video id=“video” width=“420”>
    <scource src=“a.mp4” type=“video/mp4”>
    <scource src=“a.ogg” type=“video/ogg”>
</video>

[Related recommendations]

1. The MIME of IIS does not register the MP4 type, resulting in unrecognizable Solution to the vidoe tag

2. Solution to the H5 video tag that can only play sound but not video

3. Share a video tag The problem and solution of being unable to play mp4

4. Using the video element to create a video player in html 5

5. Detailed explanation of html5 video tag test application

The above is the detailed content of Summary of basic knowledge about HTML5 video. For more information, please follow other related articles on the PHP Chinese website!