音视频 前端 html5中，video标签就可以播放视频，为什么还要嵌套source标签？

虽然

我们先看一下

在这个例子中，src属性指定了视频文件的路径，而controls属性表示显示视频播放器的控制条。这样就可以在网页上直接播放视频了。

是不是这么一看果然还是

但是！！！

但是！！！

但是！！！

但是之后，必是重点！！！

首先使用标签，可以多格式支持：

不同的浏览器和设备对于视频格式的支持是不同的。某些浏览器可能只支持特定的视频格式，例如MP4或WebM。

通过嵌套标签，你可以提供多个不同格式的视频源，让浏览器可以根据自身支持的格式选择最合适的源进行播放。例如：

这样，如果浏览器支持MP4格式，就会选择video.mp4作为视频源；如果不支持MP4但支持WebM格式，就会选择video.webm作为视频源。这样可以确保视频在各种浏览器和设备上都能正常播放。

其次，通过嵌套多个标签，你可以提供多个视频源，每个源包含不同的视频内容。

浏览器会按照标签的顺序逐个检查视频源，并选择第一个可播放的源进行播放。如果第一个源无法播放，浏览器会回退到下一个源，直到找到可播放的源为止。

这样，你可以在标签中提供备用的视频源，以确保即使一个源无法播放，仍然能够提供可用的备选源。

另外，使用媒体查询和响应式设计技术，你可以根据不同的屏幕尺寸或设备类型提供不同的视频源。

通过嵌套多个标签，并在标签中使用media属性指定不同的媒体查询条件，你可以针对不同的设备选择最适合的视频源。

例如，你可以提供高分辨率的视频源供大屏幕设备使用，而为移动设备提供低分辨率或适应性更好的视频源。这样可以优化视频播放的性能和用户体验。

下面这个例子可以展示如何使用标签和媒体查询来适应不同设备：

在这个例子中，如果设备的视口宽度大于等于800px，浏览器会选择video-large.mp4作为视频源；如果视口宽度小于800px，浏览器会选择video-small.mp4作为视频源。这样可以根据设备的屏幕尺寸提供最合适的视频源。

如何？

现在是不是理解了

嵌套标签在HTML5中的

2023新版前端Web开发HTML5+CSS3+移动web视频教程，前端web入门首选黑马程序员

好文阅读

 您阅读本篇文章共花了：