While <video>the tag itself can be used to play the video, nested <source>tags allow for more flexibility and compatibility.
Let's first look at <video>the basic usage of tags. <video>Tags are elements in HTML5 used to embed videos on web pages. You can simply use <video>tags to specify the source file path of the video, for example:
<video src="video.mp4" controls></video>In this example, srcthe attribute specifies the path to the video file, and controlsthe attribute indicates the control bar that displays the video player. This allows the video to be played directly on the web page.
Is it true that the label is simple and easy to use after looking at it this way <video>?
but! ! !
but! ! !
but! ! !
But after that, it must be the key point! ! !
First use <source>tags, which can support multiple formats:
Different browsers and devices support different video formats. Certain browsers may only support certain video formats, such as MP4 or WebM.
By nesting <source>tags, you can provide multiple video sources in different formats, so that the browser can choose the most suitable source to play according to the formats it supports. For example:
<video controls>
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
</video>In this way, if the browser supports the MP4 format, it will be selected video.mp4as the video source; if it does not support MP4 but supports the WebM format, it will be selected video.webmas the video source. This ensures that the video plays properly across browsers and devices.
Second, by nesting multiple <source>tags, you can provide multiple video sources, each containing different video content.
The browser <source>checks the video sources one by one in the order of the tags, and selects the first playable source to play. If the first source cannot be played, the browser falls back to the next source until a playable source is found.
This way, you can <source>provide alternate video sources in the tag to ensure that even if one source fails to play, an alternate source is still available.
Plus, using media queries and responsive design techniques, you can serve different video sources based on different screen sizes or device types.
By nesting multiple <source>tags and <source>using mediaattributes in the tags to specify different media query conditions, you can select the most suitable video source for different devices.
For example, you can provide a high-resolution video feed for larger-screen devices, and a lower-resolution or better-adapted video feed for mobile devices. This optimizes the performance and user experience of video playback.
The following example shows how to use <source>tags and media queries to adapt to different devices:
<video controls>
<source src="video-large.mp4" type="video/mp4" media="(min-width: 800px)">
<source src="video-small.mp4" type="video/mp4" media="(max-width: 799px)">
</video>In this example, if the viewport width of the device is greater than or equal to 800px, the browser will choose it video-large.mp4as the video source; if the viewport width is less than 800px, the browser will choose it video-small.mp4as the video source. This provides the most appropriate video source based on the device's screen size.
how?
Now that you understand <video>the tags, you can play the video, why do you need to nest <source>the tags?
Nested tags provide more flexibility and compatibility in tags <source>in HTML5 . <video>By providing multiple video sources and using media queries, you can ensure that the video plays properly on different browsers and devices, and provide the best video experience for different devices.