4、HTML5 音视频元素全解析

HTML5 音视频元素全解析

在当今的网页开发中，音视频元素的运用越来越广泛。HTML5 提供了丰富的音视频功能，下面将详细介绍相关元素和属性。

视频元素属性

视频元素 <video> 有多个重要属性，下面为你逐一介绍。

1. 信箱和竖条显示

信箱或竖条显示通常不使用传统的黑条，而是将播放区域的这些部分设为透明，让背景透出，这样在网页上更自然。若要将这些区域设置为其他颜色，需使用 CSS 显式设置特定背景颜色。不过，目前浏览器对信箱和竖条显示的实现并不统一。例如，Firefox 和 IE 对海报属性不进行装箱处理，而是进行缩放。IE 不会停留在海报上，而是使用黑条而非透明条。在 Firefox 中开始播放视频时，视频的装箱处理会正确执行。

2. @controls 属性

@controls 属性是 <video> 元素非常实用的属性之一。若你只想嵌入视频并为用户交互提供默认控件，该属性就很有用。它是一个布尔属性，若不设置 @autoplay ，控件的显示方式因浏览器而异：
- Safari 和 Chrome：始终显示。
- Firefox：鼠标悬停和移出视频时显示。
- Opera 和 IE：仅鼠标悬停在视频上时显示。

示例代码如下：

<video src=”HelloWorld.ogv” controls&g