HTML5-音频和视频

HTML5为我们引入了内置的音频和视频标签，使得在网页中嵌入音频和视频变得非常容易。同时，HTML5支持多种不同格式的音频和视频文件，可以使用浏览器原生支持格式，而不必使用插件。

音频标签

要在网页上使用音频文件，可以使用<audio>标签。

<audio src="audiofile.mp3" controls>
  Your browser does not support the audio element.
</audio>

• src: 指定音频文件的URL。
• controls: 显示音频控制条。
• 包含在标签中的文本仅在浏览器无法加载音频时显示。

视频标签

要在网页上使用视频文件，可以使用<video>标签。

<video src="videofile.mp4" controls>
  Your browser does not support the video element.
</video>

• src: 指定视频文件的URL。
• controls: 显示视频控制条。
• 包含在标签中的文本仅在浏览器无法加载视频时显示。

支持的格式

HTML5支持多种不同格式的音频和视频文件，具体取决于浏览器。

常见的音频格式包括：MP3、WAV、Ogg Vorbis、AAC、FLAC等。

常见的视频格式包括：MP4、WebM、Ogg Theora等。

添加样式

可以使用CSS为音频和视频样式添加自定义样式。例如：

audio {
  width: 300px;
  background-color: #eee;
}

video {
  width: 600px;
  height: 400px;
  background-color: #eee;
}

使用JavaScript控制音频和视频

可以使用JavaScript来控制音频和视频的播放、暂停、音量等操作。例如:

var audio = document.querySelector('audio');
audio.play(); // 播放音频

var video = document.querySelector('video');
video.pause(); // 暂停视频

结论

HTML5的音频和视频标签为网站开发者提供了更便捷的嵌入音视频文件的方式，同时也为用户提供了更好的体验。而且开发者通过JavaScript可以轻松控制音视频的操作，为用户提供更好的体验。