HTML5 视频:使用 source 元素而不是 src 属性有什么好处吗

HTML5 Video: Are there any benefits to using a source element over the src attribute

根据 HTML5 视频元素上的 MDN documentationsrc 属性是可选的:

src: The URL of the video to embed. This is optional; you may instead use the <source> element within the video block to specify the video to embed.

为什么使用 <source> 作为一种方法是好是坏?或者它只是一种不同的方式?

如果您想拥有不同的来源,您需要来源标签来声明它们。 src 属性不可能做到这一点。

To make it work in all browsers - use <source> elements inside the <video> element. <source> elements can link to different video files. The browser will use the first recognized format:

Sic W3school

如果您有多个源文件,则需要源标记(不能有两个 src 属性)。通常你应该至少有每个文件的 .mp3.ogg 版本,以确保与所有浏览器兼容,所以实际上,你确实需要那个源标记。

source 元素允许您仅使用 HTML 定义不同的格式。如果无法读取第一个来源,浏览器将尝试下一个,依此类推。

使用 src 属性你只有一次机会 - 也就是说,如果在 HTML 中使用。

使用 JavaScript 你可以结合 src 属性 和 canPlayType() method 来确定是否可以播放某种格式,如果该调用的结果是非-empty 然后使用代表该类型文件的 link 设置 src。与从 html.

中的预定义来源相比,这为您提供了更多种类的条件场景