编辑“︁HTML媒体控制器”︁

= HTML媒体控制器 =

HTML媒体控制器是用于控制网页中多媒体元素（如音频、视频）的交互式界面。它允许用户播放、暂停、调整音量、跳转进度等操作，无需编写额外的JavaScript代码即可实现基本功能。

== 基本概念 ==

HTML5引入了内置的媒体控制器，通过<code><audio></code>和<code><video></code>元素的'''controls'''属性即可启用：

<syntaxhighlight lang="html">
<video src="example.mp4" controls></video>
</syntaxhighlight>

这将显示包含以下控件的默认界面：
* 播放/暂停按钮
* 进度条
* 音量控制
* 全屏按钮（视频）

=== 控制器组成 ===
<mermaid>
pie
    title 默认媒体控制器组件
    "播放/暂停" : 25
    "进度条" : 30
    "音量控制" : 20
    "全屏按钮" : 15
    "其他" : 10
</mermaid>

== 自定义控制器 ==

虽然默认控制器很方便，但开发者可以通过JavaScript API创建自定义界面：

<syntaxhighlight lang="html">
<video id="myVideo" src="example.mp4"></video>
<button onclick="document.getElementById('myVideo').play()">播放</button>
<button onclick="document.getElementById('myVideo').pause()">暂停</button>
<input type="range" oninput="document.getElementById('myVideo').volume = this.value" min="0" max="1" step="0.1">
</syntaxhighlight>

=== 常用媒体API方法 ===
{| class="wikitable"
|-
! 方法 !! 描述
|-
| <code>play()</code> || 开始播放
|-
| <code>pause()</code> || 暂停播放
|-
| <code>load()</code> || 重新加载媒体
|-
| <code>canPlayType()</code> || 检查浏览器是否支持特定格式
|}

== 高级控制 ==

=== 时间更新事件 ===
监听时间变化以实现自定义进度条：

<syntaxhighlight lang="javascript">
const video = document.getElementById('myVideo');
video.ontimeupdate = function() {
    const progress = (video.currentTime / video.duration) * 100;
    document.getElementById('progressBar').style.width = progress + '%';
};
</syntaxhighlight>

=== 全屏控制 ===
使用Fullscreen API实现自定义全屏按钮：

<syntaxhighlight lang="javascript">
function toggleFullscreen() {
    if (!document.fullscreenElement) {
        video.requestFullscreen().catch(err => {
            console.log(`全屏错误: ${err.message}`);
        });
    } else {
        document.exitFullscreen();
    }
}
</syntaxhighlight>

== 实际应用案例 ==

=== 教育网站视频播放器 ===
一个完整的自定义视频控制器实现：

<syntaxhighlight lang="html">
<div class="video-player">
    <video id="lessonVideo" src="math-lesson.mp4"></video>
    <div class="controls">
        <button class="play-btn">▶</button>
        <div class="progress-container">
            <div class="progress-bar"></div>
        </div>
        <span class="time">00:00 / 00:00</span>
        <button class="fullscreen-btn">⛶</button>
    </div>
</div>

<script>
    // JavaScript实现所有控制功能
    const video = document.getElementById('lessonVideo');
    const playBtn = document.querySelector('.play-btn');
    const progressBar = document.querySelector('.progress-bar');
    const timeDisplay = document.querySelector('.time');
    
    playBtn.addEventListener('click', () => {
        if (video.paused) {
            video.play();
            playBtn.textContent = '❚❚';
        } else {
            video.pause();
            playBtn.textContent = '▶';
        }
    });
    
    video.addEventListener('timeupdate', updateProgress);
    
    function updateProgress() {
        const progress = (video.currentTime / video.duration) * 100;
        progressBar.style.width = `${progress}%`;
        
        // 格式化时间显示
        const mins = Math.floor(video.currentTime / 60);
        const secs = Math.floor(video.currentTime % 60);
        const totalMins = Math.floor(video.duration / 60);
        const totalSecs = Math.floor(video.duration % 60);
        
        timeDisplay.textContent = 
            `${mins}:${secs < 10 ? '0' : ''}${secs} / ${totalMins}:${totalSecs < 10 ? '0' : ''}${totalSecs}`;
    }
</script>
</syntaxhighlight>

== 跨浏览器注意事项 ==

不同浏览器对媒体控制器的实现有差异，需要注意：
* 样式可能不一致
* 支持的媒体格式不同
* 移动设备上的全屏行为特殊
* 自动播放策略限制

建议始终提供多种格式的媒体源：

<syntaxhighlight lang="html">
<video controls>
    <source src="example.webm" type="video/webm">
    <source src="example.mp4" type="video/mp4">
    您的浏览器不支持HTML5视频
</video>
</syntaxhighlight>

== 性能优化 ==

对于大型媒体文件，考虑：
* 使用<code>preload="metadata"</code>属性
* 实现分段加载（通过Media Source Extensions API）
* 提供不同质量的备用源
* 使用<code>poster</code>属性显示视频封面

数学上，预加载的字节数可以表示为：
<math>
P = \min(F, \max(0.1 \times S, 2^{20}))
</math>
其中：
* <math>P</math> = 预加载字节数
* <math>F</math> = 文件总大小
* <math>S</math> = 网络速度（字节/秒）

== 无障碍访问 ==

确保媒体控制器对所有用户可用：
* 为控件添加适当的ARIA标签
* 提供字幕和音频描述
* 确保键盘可操作
* 提供文字转录

示例ARIA实现：
<syntaxhighlight lang="html">
<button aria-label="播放视频" onclick="video.play()">▶</button>
</syntaxhighlight>

== 总结 ==

HTML媒体控制器为网页多媒体提供了强大的控制能力，从简单的默认界面到完全自定义的实现，开发者可以根据需求选择不同级别的控制方案。理解媒体API和控制器工作原理是创建丰富媒体体验的基础。

[[Category:编程语言]]
[[Category:HTML]]
[[Category:HTML图像与多媒体]]