HTML5 多媒体开发秘籍

在HTML5中，我们可以使用<audio>和<video>标签来嵌入音频和视频内容。以下是一些使用这些标签的示例代码：

1. 基本的音频播放：

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
  您的浏览器不支持 audio 元素。
</audio>

2. 带有回退的视频播放：

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  您的浏览器不支持 video 元素。
</video>

3. 自动播放视频，循环播放：

<video width="320" height="240" autoplay loop controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  您的浏览器不支持 video 元素。
</video>

4. 使用JavaScript控制视频播放：

<button onclick="playPause()">播放/暂停</button>
<video id="myVideo" width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  您的浏览器不支持 video 元素。
</video>
 
<script>
var myVideo = document.getElementById("myVideo");
 
function playPause() {
  if (myVideo.paused)
    myVideo.play();
  else
    myVideo.pause();
}
</script>

这些示例展示了如何在HTML5中嵌入音频和视频，并提供了基本的控制功能。开发者可以根据自己的需求，使用这些标签并添加额外的属性和JavaScript代码来增强多媒体体验。