HTML5通过<audio>与<video>标签实现了多媒体内容的原生嵌入，彻底改变了过去依赖Flash插件的历史，使音视频播放更轻量、安全且跨平台兼容，同时提供标准化的API接口控制媒体播放行为。

多媒体标签核心特性

• 无需插件支持：所有现代浏览器均原生支持HTML5音视频播放，无需安装Flash等第三方插件，降低用户使用门槛。
• 跨平台兼容性：统一的播放控制接口，在PC、移动端（iOS/Android）及平板设备上表现一致。
• 可编程控制：通过JavaScript API可实现播放/暂停、音量调节、进度控制等自定义交互（如play()方法播放，pause()方法暂停）。
• 格式灵活性：支持多种媒体格式，可通过<source>标签提供多个格式源，浏览器自动选择支持的格式播放。

<video>标签详解

<video>标签用于嵌入视频内容，核心属性包括：

• src：视频文件URL（若使用<source>标签指定多格式源，可省略此属性）。
• controls：显示浏览器默认播放控件（包含播放/暂停按钮、进度条、音量控制等），无需自定义即可实现基础交互。
• width/height：设置视频播放器宽度/高度（单位：像素或百分比），若只设置一个维度，视频会按比例缩放。
• autoplay：页面加载完成后自动播放（注意：部分浏览器（如Chrome）要求视频静音（muted属性）时才允许自动播放，避免扰民）。
• loop：视频播放结束后自动循环播放。
• muted：默认静音播放。
• poster：视频加载前或未播放时显示的封面图片URL。
• preload：指定预加载策略，可选值：
• auto：浏览器自动决定是否预加载（默认）。
• metadata：仅预加载元数据（如时长、尺寸）。
• none：不预加载任何数据，直到用户触发播放。

<audio>标签详解

<audio>标签用于嵌入音频内容，属性与<video>类似，主要差异在于无width/height/poster等视觉相关属性，核心属性包括：

• src/controls/autoplay/loop/muted/preload：功能与<video>对应属性一致。
• volume：通过JavaScript控制音量（0.0-1.0，0为静音，1为最大音量）。

案例1-5：自定义控制的视频播放器实现

以下代码创建一个带自定义封面、多格式支持及基础播放控制的视频播放器：

<!-- 视频播放器容器 -->
<div class="video-player">
<!-- video标签：controls属性显示默认控件；poster设置封面图 -->
<video id="myVideo" controls poster="video-cover.jpg" width="800" height="450">
<!-- source标签：提供多种格式视频源，浏览器自动选择支持的格式 -->
<source src="movie.mp4" type="video/mp4"> <!-- MP4格式（H.264编码）：主流浏览器支持 -->
<source src="movie.webm" type="video/webm"> <!-- WebM格式（VP8/VP9编码）：开源格式，Chrome/Firefox支持 -->
<source src="movie.ogg" type="video/ogg"> <!-- Ogg格式（Theora编码）：Firefox/Opera支持 -->
<!-- 浏览器不支持video标签时显示的备选内容 -->
您的浏览器不支持HTML5视频播放，请升级浏览器或下载视频文件：
<a href="movie.mp4">下载MP4格式</a> | <a href="movie.webm">下载WebM格式</a>
</video>

<!-- 自定义播放控制区（可选，此处仅展示原生controls用法） -->
<div class="custom-controls">
<button onclick="document.getElementById('myVideo').play()">播放</button>
<button onclick="document.getElementById('myVideo').pause()">暂停</button>
<button onclick="document.getElementById('myVideo').volume += 0.1">增大音量</button>
<button onclick="document.getElementById('myVideo').volume -= 0.1">减小音量</button>
</div>
</div>

多媒体格式兼容性说明

不同浏览器对音视频格式的支持存在差异，需提供多格式源确保广泛兼容：

性能优化建议

• 视频文件体积较大，建议通过preload="metadata"仅预加载时长等元数据，减少初始加载流量。
• 为不同设备提供多种分辨率视频（如480p/720p/1080p），通过JavaScript根据用户网络状况动态切换<source>的src属性，平衡加载速度与播放质量。