在移动端网页上播放视频和音频，是现代网页设计中非常常见的需求。HTML5提供了丰富的API和标签，使得视频和音频的嵌入和播放变得更加简单。以下是一份HTML5全攻略，帮助你在手机上顺利播放视频和音频。
选择合适的视频格式
在移动端，常见的视频格式有MP4、WebM和Ogg。其中，MP4格式兼容性最好，几乎在所有设备上都能播放。WebM和Ogg格式则在某些设备上可能需要额外的解码器支持。
使用HTML5的<video>标签
HTML5的<video>标签用于在网页上嵌入视频。以下是一个简单的示例：
<video controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.webm" type="video/webm">
<source src="movie.ogv" type="video/ogg">
您的浏览器不支持视频播放，请升级您的浏览器。
</video>
在这个例子中，我们定义了三个视频源，分别对应不同的格式。如果浏览器支持某个格式，它将自动播放相应的视频。
设置视频播放器控件
<video>标签的controls属性允许用户通过浏览器自带的控件来控制视频播放。这些控件通常包括播放/暂停、音量控制、进度条等。
使用HTML5的<audio>标签
与<video>标签类似，HTML5的<audio>标签用于在网页上嵌入音频。以下是一个简单的示例：
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
您的浏览器不支持音频播放，请升级您的浏览器。
</audio>
在这个例子中，我们定义了一个音频源，对应MP3格式。如果浏览器支持该格式，它将自动播放音频。
设置音频播放器控件
与视频播放器控件类似，<audio>标签的controls属性允许用户通过浏览器自带的控件来控制音频播放。
视频和音频的响应式播放
为了确保视频和音频在手机上能够顺利播放，我们需要对它们进行响应式处理。以下是一些方法：
- 使用百分比宽度和高度：设置视频和音频元素的宽度和高度为百分比，这样它们将根据屏幕大小自动调整大小。
- 使用CSS媒体查询：通过CSS媒体查询，为不同屏幕尺寸设置不同的样式，以适应不同设备。
- 使用视频和音频容器的最大宽度：设置视频和音频容器的最大宽度，以防止它们在屏幕上过于宽大。
video, audio {
max-width: 100%;
}
总结
通过以上攻略，你可以在手机上顺利播放视频和音频。记住，选择合适的视频格式、使用HTML5的<video>和<audio>标签、设置控件和响应式设计是关键。希望这份攻略能帮助你解决在移动端播放视频和音频的问题。