1. The video element can load the video through the src attribute, and the content can be placed in it. The content will be displayed when the browser does not support the video element. Because each browser supports different video formats, the source is generally used to load videos to ensure that each browser can have its corresponding playable video format. Browsers with source tags will only match videos compatible with the first browser.
<video controls>
<source src="rabbit320.mp4" type="video/mp4">
<source src="rabbit320.webm" type="video/webm">
<p> Your browser does not support HTML5 video. You can click <a href="rabbit320.mp4"> this link </a> to watch </ p>
</video>
2. For browsers that do not support SVG (IE 8 and lower, Android 2.3 and lower), you can refer to PNG or JPG from the src attribute, and use the srcset attribute to only be recognized by recent browsers) to reference SVG .
Responsive image application:
Previous understanding:
Just like the teacher taught before, use @media (XXX) to control the style of the picture, which is controlled by the @ rule of css. This is obviously possible, but it has always been used in that case. It is the same picture, which may cause the small picture to be blurred when enlarged.
Now understanding:
The img in html originally provides an attribute srcset to control the size. The srcset contains multiple images of different sizes, and then the media query control through the size attribute should select the appropriate photo. This is very reasonable.
Why did the teacher teach this before? I feel that it is because it is taught in the bootstrap framework, because it mainly uses its css and js in this framework. It is also reasonable to use css. If it is not the bootstrap framework webpage, use srcset.
Special note: google chorme can't use srcset. I don't know why, you need to use firefox. This is the first time I feel the difference between browsers.