本文共 1650 字，大约阅读时间需要 5 分钟。

HTML5音频与视频标签

一、音频（Audio）

音频标签是HTML5中用于播放音频文件的重要标签，支持在网页中直接播放音频，减少了对插件的依赖。

1. 基本语法

音频标签的基本使用方法较为简单，但需要注意以下几点：

• src：指定当前播放的音频文件路径。
• controls：启用音频控制器，提供播放、暂停、调整音量等功能。
• loop：实现音频循环播放。
• autoplay：默认情况下，自动播放音频。需要注意的是，主流浏览器已关闭 autoplay 功能，需通过脚本手动触发。

2. 支持格式

各大浏览器对音频格式的支持情况如下：

• Firefox：支持 Ogg Vorbis 和 WAV 格式。
• Opera：支持 Ogg Vorbis 和 WAV 格式。
• Safari：支持 MP3、AAC 格式及 MP4。
• Chrome：支持 Ogg Vorbis、MP3、WAV、AAC 和 MP4。
• Internet Explorer 9+：支持 MP3、AAC 格式及 MP4。
• IOS：支持 MP3、AAC 格式及 MP4。
• Android：支持 AAC 和 MP3 格式。

3. Audio对象

作为一个 window 对象，Audio 标签提供多种属性和方法，用于控制音频播放状态及获取相关信息：

• currentTime：获取当前播放时间。
• duration：获取音频总时长。
• play()：启动播放。
• pause()：暂停播放。
• load()：重新加载音频文件。
• 其他事件：如 loadstart、loadedmetadata、progress 等。

4. Audio.js

为了兼容旧版本浏览器，许多开发者使用 Audio.js 实现音频播放功能。Audio.js 允许在不依赖插件的情况下，支持多种音频格式，并通过脚本控制音频播放。

二、视频（Video）

视频标签是HTML5中用于播放视频文件的标签，支持流媒体播放。

1. 基本语法

视频标签的基本使用方法与音频类似：

• src：指定视频文件路径。
• controls：启用视频控制器。
• loop：实现视频循环播放。
• autoplay：默认启用自动播放（需手动触发）。
• height、width：可手动设置视频播放器尺寸。
• muted：默认静音。
• poster：设置视频加载时显示的预览图。
• preload：控制视频预加载策略。

2. Video对象

视频标签同样提供丰富的属性和方法，用于控制视频播放及获取相关信息：

• currentTime：获取当前播放时间。
• duration：获取视频总时长。
• play()：启动播放。
• pause()：暂停播放。
• load()：重新加载视频。
• 其他事件：如 loadstart、loadedmetadata、loadeddata、progress 等。

3. 视频格式与流媒体

视频格式支持：

• Firefox：支持 Ogg Theora 和 WebM。
• Opera：支持 Ogg Theora 和 WebM。
• Safari：支持 MP4。
• Chrome：支持 Ogg Theora、MP4 和 WebM。
• Internet Explorer 9+：支持 MP4 和 WebM（需插件支持）。
• IOS：支持 MP4。
• Android：支持 MP4 和 WebM（Android 2.3 及以上）。

流媒体是通过流式传输协议（如 RTMP、RTSP、FLV）实现的视频播放技术，适用于大规模内容分发。

三、Video.js

Video.js 是一种基于 JavaScript 的视频播放器框架，提供了更高级别的视频播放控制功能。通过 Video.js 可以自定义播放器界面，集成广告、水印等功能，适合专业视频播放场景。

四、总结

HTML5音频与视频标签的引入极大地简化了媒体资源的开发与使用，支持了更加丰富的网页内容。通过合理运用这些标签及 JavaScript 控制，可以实现更加流畅、个性化的媒体播放体验。

转载地址：http://gncv.baihongyu.com/