HTML5 audio & video 元素详解及控制方法

"音频与视频是网页媒体的重要组成部分，HTML5引入了`<audio>`和`<video>`元素来标准化网页上的音频和视频播放。这两个元素提供了丰富的属性和方法，使得开发者能够更好地控制和定制多媒体体验。" 在HTML5中，`<audio>`元素是用来在网页上嵌入音频内容的标准方式。以前，网页上的音频播放主要依赖于各种插件，如Flash，但这些插件并不在所有浏览器中通用。`<audio>`元素提供了几个关键属性： 1. `controls`：此属性用于显示音频播放的基本控制条，包括播放/暂停按钮、音量滑块等。 2. `loop`：当设置为`loop`时，音频会循环播放，直至被手动停止或通过编程方式干预。 3. `autoplay`：如果设置为`autoplay`，音频将在页面加载完成后自动开始播放。 示例代码： ```html <audio controls loop autoplay> <source src="xiangwang.mp3" /> <source src="xiangwang.ogg" /> 你的浏览器不支持audio标签 </audio> ``` 这段代码将创建一个音频播放器，显示控制条，自动播放，并且循环播放。同时，提供了两种不同的音频格式（MP3和OGG）作为备选，以确保在不同浏览器中的兼容性。 对于视频，HTML5引入了`<video>`元素。其属性与`<audio>`类似，但也有一些特定于视频的属性，例如： 1. `poster`：此属性允许设置视频预览图，即视频在播放前显示的静态图片。 2. `width`和`height`：用于指定视频的宽高。 示例代码： ```html <video controls width="750" id="video" poster="flower.jpg"> <source src="kuaixuewang.mp4" /> </video> ``` 这里创建了一个具有控制条、固定宽度的视频，并显示指定的海报图像。 除了基本的属性，`<audio>`和`<video>`元素还提供了许多方法，以实现对媒体的更精细控制： - `Media.currentSrc`：返回当前正在播放的资源URL。 - `Media.src = value`：设置或获取当前资源的URL。 - `Media.currentTime = value`：设置或返回当前的播放时间（以秒计）。 - `Media.duration`：返回音频/视频的总时长（以秒计）。 - `Media.paused`：检查是否处于暂停状态。 - `Media.ended`：判断视频是否播放完毕。 - `Media.played`：返回已播放的时间范围。 - `Media.autoPlay`：判断是否配置为自动播放。 - `Media.loop`：判断是否设置为循环播放。 - `Media.play()`：开始播放媒体。 - `Media.pause()`：暂停媒体。 - `Media.volume = value`：设置音量，值域为0.0到1.0之间。 通过这些属性和方法，开发者可以构建复杂而交互性强的多媒体网页应用，提供更加丰富和个性化的用户体验。此外，还可以利用开源播放器库，如Video.js（http://docs.videojs.com/），来进一步增强功能和样式，适应不同的项目需求。