最基础和核心的代码

这是最直接、最简单的实现方式，只需要一行 HTML 代码。

<video src="你的视频文件.mp4" controls></video>

代码解释:

  • <video>: 这是 HTML5 中专门用于嵌入视频内容的标签。
  • src="你的视频文件.mp4": src (source) 属性，用来指定你想要播放的 MP4 文件的路径。请务必将 "你的视频文件.mp4" 替换成你自己的视频文件路径，这个路径可以是：
    • 相对路径: 如果你的 HTML 文件和视频文件在同一个文件夹下，直接写文件名即可，如 src="my-video.mp4"，如果在子文件夹，则 src="videos/my-video.mp4"。
    • 绝对路径: 网络上的完整 URL，如 src="https://www.example.com/path/to/video.mp4"。
  • controls: 这是一个非常重要的属性，它告诉浏览器在视频下方显示一套默认的播放控件，包括播放/暂停按钮、进度条、音量控制、全屏按钮等，如果没有这个属性,用户将无法与视频进行交互。

更完善的代码（推荐）

为了获得更好的兼容性和用户体验，推荐使用以下代码，它包含了多种视频格式作为备选,并提供了更丰富的自定义样式。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">网页视频播放示例</title>
    <style>
        /* 给视频容器添加一些基本样式 */
        .video-container {
            max-width: 800px; /* 限制视频最大宽度 */
            margin: 20px auto; /* 居中显示 */
            border: 1px solid #ccc;
            border-radius: 8px;
            overflow: hidden; /* 让视频的圆角效果生效 */
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }
        /* 给视频本身添加样式 */
        video {
            width: 100%;  /* 视频宽度自适应容器 */
            height: auto; /* 高度自动，保持原始比例 */
            display: block; /* 去除视频下方可能出现的空白间隙 */
        }
    </style>
</head>
<body>
    <h1>我的视频播放器</h1>
    <div class="video-container">
        <video controls poster="视频封面图片.jpg">
            <!-- 
                <source> 标签用于提供多种视频格式，
                浏览器会按顺序尝试播放第一个它支持的格式。
            -->
            <source src="my-video.mp4" type="video/mp4">
            <!-- 如果浏览器不支持 MP4，可以提供 WebM 或 OGG 格式作为备选 -->
            <source src="my-video.webm" type="video/webm">
            <source src="my-video.ogv" type="video/ogg">
            <!-- 
                这是最后的提示信息，如果浏览器完全不支持 video 标签，
                就会显示这段文字。
            -->
            您的浏览器不支持 HTML5 视频，请升级您的浏览器。
            <a href="my-video.mp4">点击这里下载视频</a>
        </video>
    </div>
</body>
</html>

代码详细解释：

  1. <div class="video-container">

    • 我们用一个 div 容器把 video 标签包裹起来，这样我们可以通过 CSS 更好地控制视频的显示效果，比如居中、添加边框、阴影等。

  2. <source>

    • 为什么需要它？因为不同的浏览器对视频编码格式的支持程度不同。
      • MP4 (H.264 编码): 目前兼容性最好的格式,几乎所有现代浏览器都支持。
      • WebM (VP8/VP9 编码): 由 Google 主导，是 Chrome, Firefox, Edge 等现代浏览器支持的优秀开源格式。
      • OGG (Theora 编码): 早期开源格式,兼容性也很好。
    • 工作原理: 浏览器会从上到下依次读取 <source> 标签，它会尝试播放第一个它能够识别并支持格式的视频文件，这样,你可以用一套代码覆盖几乎所有用户。

  3. type 属性

    • 在 <source> 标签中，type 属性非常重要，它告诉浏览器这个文件的具体格式（MIME type），这样浏览器就不需要下载文件头去猜测格式，可以直接跳过不兼容的格式,从而提高加载速度和用户体验。

  4. poster="视频封面图片.jpg"

    这是一个非常有用的属性，它会在视频播放前显示指定的图片作为“封面”或“预览图”，这比显示一个黑框或者第一帧要好得多,可以吸引用户点击播放。

  5. 最后的 <a>

    • 这是一个优雅的降级处理，如果用户的浏览器非常古老，连 <video> 标签都不支持，那么它就会显示 <video> 和 </video> 之间的所有内容,这样用户至少可以通过点击链接来下载视频文件。

使用 JavaScript 控制视频

除了通过 controls 属性让用户控制，你还可以用 JavaScript 来更灵活地控制视频的播放。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">JavaScript 控制视频</title>
</head>
<body>
    <video id="myVideo" width="400">
        <source src="your-video.mp4" type="video/mp4">
        您的浏览器不支持 HTML5 视频。
    </video>
    <div>
        <button id="playBtn">播放</button>
        <button id="pauseBtn">暂停</button>
        <button id="muteBtn">静音</button>
        <button id="unmuteBtn">取消静音</button>
    </div>
    <script>
        // 通过 ID 获取 video 元素
        const video = document.getElementById('myVideo');
        const playBtn = document.getElementById('playBtn');
        const pauseBtn = document.getElementById('pauseBtn');
        const muteBtn = document.getElementById('muteBtn');
        const unmuteBtn = document.getElementById('unmuteBtn');
        // 为按钮添加点击事件
        playBtn.addEventListener('click', function() {
            video.play(); // 调用 play() 方法播放视频
        });
        pauseBtn.addEventListener('click', function() {
            video.pause(); // 调用 pause() 方法暂停视频
        });
        muteBtn.addEventListener('click', function() {
            video.muted = true; // 设置 muted 属性为 true 来静音
        });
        unmuteBtn.addEventListener('click', function() {
            video.muted = false; // 设置 muted 属性为 false 来取消静音
        });
    </script>
</body>
</html>

常用的 JavaScript 视频属性和方法：

  • 属性:
    • video.paused: 布尔值,视频是否处于暂停状态。
    • video.currentTime: 当前播放的时间（秒）。
    • video.duration: 视频的总时长（秒）。
    • video.volume: 音量（0.0 到 1.0）。
    • video.muted: 是否静音（布尔值）。
    • video.width / video.height: 视频的宽度和高度。
  • 方法:
    • video.play(): 播放视频。
    • video.pause(): 暂停视频。
    • video.load(): 重新加载视频。
方法 优点 缺点 适用场景
基础 <video> 代码极简，快速实现 功能有限，无法自定义样式和交互 个人博客、简单的视频展示
<source> 多格式 兼容性最好，覆盖所有现代浏览器 需要准备多种格式的视频文件 绝大多数商业网站和项目
JavaScript 控制 功能强大，可完全自定义播放逻辑 需要编写额外的代码 定制化的视频播放器、视频网站、交互式应用

对于绝大多数情况，直接使用第二部分“更完善的代码”是最佳选择，它兼顾了兼容性、用户体验和可维护性。