Video and Audio

1.video (VIDEO)

Video player with controller:

The <video> element provides play, pause, and volume controls to control the video.

The <video> element element also provides the width and Height properties to control the size of the video. If you set the height and width, the required video space is retained when the page loads. If you do not set these properties and the browser does not know the size of the video, the browser will not be able to load a specific space, the page will vary depending on the size of the original video.

The content inserted between <video> and </video> tags is presented to browsers that do not support video elements.

The <video> element supports multiple <source> elements. <source> elements can be linked to different video files. The browser will use the first recognizable format:

The code is as follows:

<Videowidth= " the"Height= "+"Controls>    <Sourcesrc= "Movie.ogg"type= "Video/ogg">    <Sourcesrc= "Movie.mp4"type= "Video/ogg">    <P>Your wanderings don't support video tags</P></Video>

Property Description:

Property	Value	Information
AutoPlay	AutoPlay	If this property appears, the video will play as soon as it is ready
Control	Control	Displays the simple elements in the video. The appearance of the control element is determined by the browser, regardless of this property. Display elements such as: Play, pause, adjust volume, skip (if content is supported), full screen, and possible subtitle switches.
Loop	Loop	Let the browser play back automatically from the beginning after the video has finished playing
Muted	Muted	Video Default Mute
Poster	Url	Specifies the image that is displayed when the video is downloaded, or the image that is displayed before the user clicks the play button
Preload	Preload	If this property appears, the video loads automatically when the page loads and prepares to play. If "AutoPlay" is present, the property is ignored
Src	Url	URL to play the video screen
Width	Pixels (px)	Set the width of the playback video
Height	Pixels (px)	Set the height of the playback video

Video format:

Format	Mime-type
MP4	Video/mp4
WebM	Video/webm
Ogg	Video/ogg

Control using the DOM:

HTML5 <video> and <audio> elements also have methods, properties, and events.

The methods, properties, and events of <video> and <audio> elements can be controlled using JavaScript.

There are methods for playing, pausing, loading, and so on. The properties (such as length, volume, etc.) can be read or set. DOM events can inform you, for example, that the,<video> element starts playing, paused, stopped, and so on.

( not yet learned, added later )

2.audio (Audio)

Audio player with Controller

The control property is used to add play, pause, and volume controls.

Between <audio> and </audio> you need to insert the hint text of the <audio> element that the browser does not support.

The <audio> element allows multiple <source> elements to be used. The <source> element can link different audio files, and the browser will use the first supported audio file.

The code is as follows:

<Audiowidth= " the"Height= "+"Control>    <Sourcesrc= "Song.ogg"type= "Audio/ogg">    <Sourcesrc= "Song.mp3"type= "Audio/mpeg">    <P>Your browser does not support the audio element</P></Audio>

Property Description:

（- -！ Same as video attributes, except for the lack of poster attributes)

Audio format:

Format	Mime-type
MP3	Audio/mpeg
Ogg	Audio/ogg
Wav	Audio/wav

(That's it ...)

Video and Audio