HTML5音频与视频详解

随着Web应用程序的普及，音频与视频的需求也越来越高。HTML5给予我们使用原生的标签来支持音频和视频。HTML5音频和视频标签分别为 <audio> 和 <video>。

音频标签

HTML5音频标签<audio>支持多种音频格式，包括MP3，Wav，Ogg和WebM等。以下是一个简单的例子：

通过给<audio>标签添加controls属性，可以让用户控制音频的播放、暂停和音量控制。<source>标签用于指定音频文件的URL和媒体类型。

视频标签

HTML5视频标签<video>同样支持多种视频格式，包括MP4，WebM和OGG等。以下是一个简单的例子：

同样，通过给<video>标签添加controls属性，可以让用户控制视频的播放、暂停和视频控制条。<source>标签用于指定视频文件的URL和媒体类型。此外，还可以通过指定视频标签的width和height属性来指定视频的大小。

音频和视频的JavaScript API

除了通过标签来控制音频和视频播放，HTML5还提供了JavaScript API来进行控制。以下是一些常用的函数：

play()

播放音频或视频。

		var audio=document.getElementById("myAudio");
		audio.play();
	

pause()

暂停音频或视频。

		var audio=document.getElementById("myAudio");
		audio.pause();
	

currentTime

获取或设置音频或视频的当前时间。

		var audio=document.getElementById("myAudio");
		console.log(audio.currentTime);
		audio.currentTime=10;
	

总结

HTML5音频与视频使得在Web上嵌入音频和视频变得更加容易和方便。<audio>和<video>标签为我们提供了一种媒体解决方案，并且还提供了JavaScript API以便更加灵活地控制音频和视频的播放。如果您需要在Web应用程序中加入音频或视频播放能力，使用HTML5音频与视频标签是一个非常好的选择。