HTML DOM 源媒体属性

源媒体属性（Source Media Attribute）是一种 HTML DOM 属性，用于指定在不同媒体条件下应该加载的媒体资源。它允许开发者根据不同的设备、屏幕尺寸或其他条件来选择性地加载不同的媒体资源，以提供更好的用户体验。

源媒体属性通常与 <source> 元素结合使用，用于为 <video> 和 <audio> 元素指定不同的媒体资源。通过使用不同的 media 查询，开发者可以根据不同的情况加载不同的媒体文件，从而优化响应式设计和跨设备兼容性。

语法

源媒体属性的语法如下：

<source media="media_query" src="media_url">

其中：

• media_query：是一个媒体查询，类似于 CSS 媒体查询，用于指定加载媒体资源的条件。如果媒体查询匹配当前设备或浏览器的特征，将会加载该媒体资源。
• media_url：是媒体资源的 URL 地址，指定了要加载的媒体文件。

媒体查询

媒体查询是源媒体属性中最重要的部分，它决定了是否加载指定的媒体资源。媒体查询使用逻辑表达式来匹配设备或浏览器的特征。

媒体查询可以包含以下类型的条件：

• 设备类型：如 screen（计算机屏幕）、print（打印机）、speech（语音合成器）等。
• 屏幕特性：如宽度、高度、分辨率等。
• 视口特性：如宽度、高度、缩放比例等。
• 颜色和颜色索引：如 color（至少支持 256 色）和 monochrome（支持黑白）。
• 输入设备：如 hover（支持鼠标悬停）、pointer（支持指针设备）等。

以下是一些常用的媒体查询示例：

• screen and (min-width: 768px) and (max-width: 1024px)：适用于屏幕宽度在 768px 到 1024px 之间的设备。
• (min-device-width: 320px) and (max-device-width: 480px) and (orientation: landscape)：适用于手机横屏状态下宽度在 320px 到 480px 之间的设备。
• print and (color)：适用于支持彩色打印的设备。

示例

以下示例演示了如何在 HTML 中使用源媒体属性：

<video>
  <source src="video.mp4" type="video/mp4" media="(min-width: 768px)">
  <source src="video-low.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

在上述示例中，当设备宽度大于等于 768px 时，将加载名为 video.mp4 的视频文件，否则将加载名为 video-low.mp4 的视频文件。如果设备不支持 HTML5 视频播放，将显示“Your browser does not support the video tag.”

总结

源媒体属性是一种在不同媒体条件下加载不同媒体资源的功能强大的 HTML DOM 属性。通过使用源媒体属性，开发者可以根据设备特征和媒体查询，选择性地加载和显示特定的媒体文件，以提供更好的用户体验和跨设备兼容性。