4、HTML5 音视频元素全解析

HTML5 音视频元素全解析

在当今的网页开发中，音视频元素的运用越来越广泛。HTML5 提供了丰富的音视频功能，本文将深入介绍 HTML5 中 <video> 、 <audio> 和 <source> 元素的相关属性及使用方法。

1. <video> 元素属性

<video> 元素是 HTML5 中用于嵌入视频的重要元素，它有几个关键属性值得我们深入了解。

1.1 信箱和支柱式显示

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

1.2 @controls 属性

@controls 属性是 <video> 元素非常有用的属性之一。如果只是想嵌入视频并为用户交互提供默认控件，那么这个属性就派上用场了。它是一个布尔属性，如果不指定 @autoplay ，控件的显示方式因浏览器而异：
- Safar