核心标签：<audio> 和 <video>

HTML5 引入了 <audio> 和 <video> 标签，它们是网页播放功能的核心，这两个标签非常相似，都提供了一套内置的播放控件（如播放/暂停、进度条、音量控制等）。

基于html的网页播放功能
（图片来源网络，侵删）

基础用法

视频播放示例 (<video>)

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">基础视频播放器</title>
</head>
<body>
    <h1>我的视频播放器</h1>
    <video width="600" controls>
        <source src="my-movie.mp4" type="video/mp4">
        <source src="my-movie.webm" type="video/webm">
        您的浏览器不支持 HTML5 视频。
    </video>
</body>
</html>

音频播放示例 (<audio>)

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">基础音频播放器</title>
</head>
<body>
    <h1>我的音频播放器</h1>
    <audio controls>
        <source src="my-song.mp3" type="audio/mpeg">
        <source src="my-song.ogg" type="audio/ogg">
        您的浏览器不支持 HTML5 音频。
    </audio>
</body>
</html>

关键属性解析

  1. controls: 最重要的属性，它会显示浏览器默认的播放控件（播放/暂停、音量、进度条、全屏等），如果没有这个属性，用户将无法与媒体进行交互。
  2. src: 指定媒体文件的路径，上面的例子使用了 <source> 标签，这是更好的做法。
  3. <source>: 建议使用 <source> 而不是直接在 <audio> 或 <video> 上使用 src。
    • 原因: 浏览器会按照 <source> 标签的顺序尝试加载文件，直到找到一个它支持的格式，这可以兼容不同的浏览器（Safari 对 MP4 支持很好，但对 WebM 支持有限；而 Chrome/Firefox 对两者都支持）。
    • type 属性: 指定媒体文件的 MIME 类型（如 video/mp4, audio/mpeg），明确指定类型可以让浏览器更快地决定是否可以播放，避免不必要的下载尝试。
  4. width 和 height (仅 <video>): 设置视频播放器的显示尺寸，你可以使用 CSS 来设置，但直接在标签上设置可以提供更好的回退方案。
  5. autoplay: 自动播放媒体。注意：出于用户体验和性能考虑，现代浏览器（尤其是移动端）通常限制自动播放，除非设置了 muted (静音)。
  6. muted: 默认静音播放。
  7. loop: 播放结束后自动重新开始。
  8. preload: 提示浏览器如何加载媒体。
    • auto: 浏览器应尽快加载整个媒体（如果适用）。
    • metadata: 只加载媒体的元数据（如时长、尺寸）。
    • none: 不预加载，当用户点击播放时再开始加载。

使用 JavaScript 进行高级控制

仅仅使用 controls 属性是不够的，很多时候，我们需要用 JavaScript 来创建自定义的播放控件，或者根据播放状态执行某些操作。

核心 JavaScript API

每个 <audio> 和 <video> 元素都提供了一系列属性和方法，让我们可以精确地控制它。

基于html的网页播放功能
（图片来源网络，侵删）

常用属性:

  • currentTime: 当前播放的时间（秒）。
  • duration: 媒体的总时长（秒）。
  • paused: 一个布尔值，表示媒体是否处于暂停状态。
  • muted: 一个布尔值，表示是否静音。
  • volume: 音量值，范围从 0.0 (静音) 到 1.0 (最大)。

常用方法:

  • play(): 开始播放媒体。
  • pause(): 暂停播放。
  • load(): 重新加载媒体源。

常用事件:

  • onplay: 当播放开始时触发。
  • onpause: 当暂停时触发。
  • onended: 当播放结束时触发。
  • ontimeupdate: 当播放时间更新时触发（拖动进度条时）。
  • onloadedmetadata: 当元数据（如时长）加载完成时触发。

自定义播放器示例

下面是一个结合了 HTML、CSS 和 JavaScript 的自定义视频播放器示例。

基于html的网页播放功能
（图片来源网络，侵删）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">自定义视频播放器</title>
    <style>
        body {
            font-family: sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding-top: 50px;
        }
        #myVideo {
            max-width: 800px;
            border: 1px solid #ccc;
        }
        .controls {
            margin-top: 10px;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        button {
            padding: 8px 15px;
            cursor: pointer;
        }
        #progressBar {
            width: 400px;
            cursor: pointer;
        }
        #volumeBar {
            width: 100px;
        }
        #timeDisplay {
            font-size: 14px;
            color: #555;
        }
    </style>
</head>
<body>
    <video id="myVideo" width="800">
        <source src="my-movie.mp4" type="video/mp4">
        您的浏览器不支持 HTML5 视频。
    </video>
    <div class="controls">
        <button id="playPauseBtn">播放</button>
        <input type="range" id="progressBar" min="0" max="100" value="0">
        <span id="timeDisplay">0:00 / 0:00</span>
        <button id="muteBtn">静音</button>
        <input type="range" id="volumeBar" min="0" max="100" value="100">
    </div>
    <script>
        const video = document.getElementById('myVideo');
        const playPauseBtn = document.getElementById('playPauseBtn');
        const progressBar = document.getElementById('progressBar');
        const timeDisplay = document.getElementById('timeDisplay');
        const muteBtn = document.getElementById('muteBtn');
        const volumeBar = document.getElementById('volumeBar');
        // 1. 播放/暂停功能
        playPauseBtn.addEventListener('click', () => {
            if (video.paused) {
                video.play();
                playPauseBtn.textContent = '暂停';
            } else {
                video.pause();
                playPauseBtn.textContent = '播放';
            }
        });
        // 2. 更新进度条和时间显示
        video.addEventListener('timeupdate', () => {
            // 更新进度条
            const value = (video.currentTime / video.duration) * 100;
            progressBar.value = value;
            // 更新时间显示
            const currentMinutes = Math.floor(video.currentTime / 60);
            const currentSeconds = Math.floor(video.currentTime % 60).toString().padStart(2, '0');
            const durationMinutes = Math.floor(video.duration / 60);
            const durationSeconds = Math.floor(video.duration % 60).toString().padStart(2, '0');
            timeDisplay.textContent = `${currentMinutes}:${currentSeconds} / ${durationMinutes}:${durationSeconds}`;
        });
        // 3. 点击进度条跳转
        progressBar.addEventListener('input', () => {
            const time = (progressBar.value / 100) * video.duration;
            video.currentTime = time;
        });
        // 4. 静音功能
        muteBtn.addEventListener('click', () => {
            video.muted = !video.muted;
            muteBtn.textContent = video.muted ? '取消静音' : '静音';
        });
        // 5. 音量控制
        volumeBar.addEventListener('input', () => {
            video.volume = volumeBar.value / 100;
        });
        // 6. 当元数据加载完成后，设置进度条的最大值
        video.addEventListener('loadedmetadata', () => {
            progressBar.max = video.duration;
        });
    </script>
</body>
</html>

响应式设计与最佳实践

  1. 使用 CSS 进行响应式设计:

    • 不要使用固定的 width 和 height，使用 max-width: 100% 和 height: auto 来确保视频在不同屏幕尺寸下都能自适应。
      video {
max-width: 100%;
height: auto;
}

  2. 考虑移动端体验:

    • 自动播放: 移动浏览器几乎完全禁止了带有声音的自动播放，如果你想在移动端实现自动播放，必须设置 muted 属性，并最好添加 playsinline 属性，让视频在 Safari 的网页内播放，而不是全屏。
      <video autoplay muted playsinline>
<!-- ... -->
</video>

  3. 提供可访问性 (Accessibility):

    • 字幕/轨道: 使用 <track> 标签为视频添加字幕或章节描述。
      <video controls>
<source src="my-movie.mp4" type="video/mp4">
<track label="中文字幕" kind="subtitles" srclang="zh" src="subtitles.vtt" default>
</video>
    • controls 属性: 它本身就提供了基本的可访问性，对于自定义控件，请确保它们可以通过键盘操作（如 Tab 键聚焦，空格键播放/暂停）。

  4. 文件格式和兼容性:

    • 视频: 推荐提供 MP4 (H.264编码) 和 WebM (VP9编码) 两种格式，MP4 兼容性最广，WebM 是开源格式，在 Chrome, Firefox, Edge 中表现优异。
    • 音频: 推荐提供 MP3 和 OGG 两种格式，MP3 兼容性最广，OGG 是开源格式。
功能级别 实现方式 优点 缺点
基础播放 <video/audio src="..." controls> 极其简单，无需任何代码 样式固定，功能有限，无法自定义
高级控制 <video/audio> + JavaScript 功能强大，完全自定义，可创建独特的用户体验 需要编写和调试代码，逻辑相对复杂
专业应用 使用媒体服务器和播放器库 (如 Video.js, Plyr, DPlayer) 功能极其丰富（如直播、DRM、广告插播），性能优化好，跨浏览器兼容性好 引入外部依赖，需要一定的学习成本

对于大多数网站,使用 <source> 标签并提供多种格式，并加上 controls 属性 是最简单、最可靠的起点，当你需要更高级的功能时，再使用 JavaScript 进行自定义，或者引入成熟的 第三方播放器库。