4、HTML5 音频与视频元素全解析

HTML5 音频与视频元素全解析

在现代网页开发中，音频和视频元素的运用极为广泛。下面将详细介绍 HTML5 中 <video> 、 <audio> 和 <source> 元素的相关属性和用法。

<video> 元素属性

• 信箱/竖框模式（Letter-boxing/Pillar-boxing） ：在网页中，信箱或竖框模式并非使用传统的黑边，而是将播放区域的部分设为透明，让背景透出，这样更自然。若要改变这些框的颜色，需使用 CSS 明确设置特定的背景颜色。不过，目前各浏览器对该模式的实现并不统一。例如，Firefox 和 IE 对 poster 属性不进行框处理，而是进行缩放。IE 不会停留在 poster 上，而是使用黑边而非透明边。在 Firefox 中开始播放视频时，框处理才会正确执行。
• @controls 属性 ：这是 <video> 元素非常实用的属性之一。若想嵌入视频并提供默认的用户交互控件，使用该属性即可。它是布尔属性，若不设置 @autoplay ，不同浏览器显示控件的方式有所不同：
  • Safari 和 Chrome：始终显示。
  • Firefox：鼠标悬停和移出视频时显示。
  <