5、HTML5 音频与视频技术全解析

HTML5 音频与视频技术全解析

1. <source> 元素及媒体查询

<source> 元素主要用于帮助浏览器从列表中选择首个可接受的媒体资源。 @type 属性可帮助识别浏览器是否支持该媒体格式，而 @media 属性则用于将所谓的媒体查询与资源关联起来。

媒体查询用于指定特定资源是为特定（范围）的输出设备量身定制的。例如， @media 值为 “min-width: 400px” 表明该资源针对宽度至少为 400px 的显示区域。以下是一些在媒体元素上使用的媒体查询示例：
- @media="handheld" ：表示媒体资源适用于手持设备。
- @media="all and (min-device-height:720px)" ：表示媒体资源适用于像素行数为 720 或更大的屏幕。
- @media="screen and (min-device-width: 100px)" ：表示媒体资源适用于像素行数为 100 或更高的屏幕。

在桌面和笔记本电脑的浏览器中，这个属性可能不太受关注，目前只有 Opera 和 Safari 实现了对它的支持。

2. 媒体元素及属性总结

为了便于快速查找，以下是所有介绍过的媒体元素及其属性的概述：
| 元素 | 属性 | 值 | 描述 |
| ---- | ---- | ---- |