基础用法：最简单的视频嵌入

这是最基本、最核心的代码，只需要一个 <video> 标签,并指定视频文件的路径即可。

向网页中添加 html5 视频控件
（图片来源网络，侵删）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">HTML5 视频</title>
</head>
<body>
    <h1>我的第一个 HTML5 视频</h1>
    <video src="my-video.mp4" width="600"></video>
</body>
</html>

代码解释：

  • <video>: 这是 HTML5 的视频标签。
  • src="my-video.mp4": src (source) 属性指定了视频文件的路径，这里是一个相对路径，假设 my-video.mp4 文件和这个 HTML 文件在同一个目录下。
  • width="600": 设置视频显示区域的宽度（像素），高度会根据视频的原始比例自动调整,以保持不变形。

添加控件和自动播放

默认情况下，浏览器可能只显示一个静态的图像，用户无法播放、暂停或控制音量,我们需要添加一些属性来提供更好的用户体验。

常用属性：

属性 值 描述
controls (无值) 最重要！ 为视频添加浏览器自带的播放控件（播放/暂停、进度条、音量、全屏等）。
autoplay (无值) 视频在页面加载后自动播放。注意： 许多现代浏览器（特别是移动端）为了节省流量和提升用户体验，会阻止自动播放，除非同时设置了 muted。
muted (无值) 视频静音播放，常与 autoplay 一起使用，以解决浏览器的自动播放限制。
loop (无值) 视频播放结束后，自动重新开始。
poster="image.jpg" 图片路径 在视频加载完成或用户点击播放前，显示指定的图片作为封面。
preload none / metadata / auto 建议浏览器如何加载视频。
- none: 不预加载。
- metadata: 仅加载视频的元数据（如时长、尺寸）。
- auto: (默认) 尽可能多地加载视频。

示例代码：

<video 
    src="my-video.mp4" 
    width="600" 
    controls 
    autoplay 
    muted 
    loop 
    poster="video-poster.jpg"
    preload="metadata">
    <!-- 这里是回退内容 -->
    您的浏览器不支持 HTML5 视频。
</video>

代码解释：

向网页中添加 html5 视频控件
（图片来源网络，侵删）
  • controls: 添加了播放器控件。
  • autoplay muted: 视频将自动静音播放。
  • loop: 视频会循环播放。
  • poster: 显示 video-poster.jpg 作为封面。
  • : 如果浏览器不支持 <video> 标签，就会显示这段文字,这是一个很好的兼容性处理。

使用 <source> 标签提供多种格式

不同的浏览器对视频编码格式的支持不同，为了确保您的视频能在所有主流浏览器（Chrome, Firefox, Safari, Edge）上播放，最好的方法是提供多种格式的视频文件（如 .mp4, .webm, .ogg）。

<source> 标签允许你在同一个 <video> 标签内指定多个视频源,浏览器会按照顺序选择它第一个能支持的格式进行播放。

<video width="600" controls poster="video-poster.jpg">
    <!-- 优先尝试 WebM 格式 (通常更优) -->
    <source src="my-video.webm" type="video/webm">
    <!-- 其次是 MP4 格式 (兼容性最广) -->
    <source src="my-video.mp4" type="video/mp4">
    <!-- 最后是 Ogg 格式 (旧版 Firefox 支持) -->
    <source src="my-video.ogv" type="video/ogg">
    <!-- 如果所有格式都不支持，显示回退内容 -->
    您的浏览器不支持 HTML5 视频，请升级您的浏览器。
</video>

代码解释：

  • <video> 标签本身不再需要 src 属性。
  • <source> 标签放在 <video> 内部。
  • type 属性非常重要，它告诉浏览器文件的 MIME 类型，这样浏览器可以在下载前就知道自己是否能播放该文件，从而节省带宽。
    • video/webm
    • video/mp4
    • video/ogg

使用 JavaScript 控制视频

你可以通过 JavaScript 来更灵活地控制视频的播放、暂停、获取当前时间等。

向网页中添加 html5 视频控件
（图片来源网络，侵删）

给 <video> 标签一个 id，这样我们就可以用 JavaScript 找到它。

<video id="myVideo" width="600" controls>
    <source src="my-video.mp4" type="video/mp4">
    您的浏览器不支持 HTML5 视频。
</video>
<div>
    <button id="playBtn">播放</button>
    <button id="pauseBtn">暂停</button>
</div>
<script>
    // 获取 video 元素
    const video = document.getElementById('myVideo');
    const playBtn = document.getElementById('playBtn');
    const pauseBtn = document.getElementById('pauseBtn');
    // 为按钮添加点击事件
    playBtn.addEventListener('click', function() {
        video.play(); // 播放视频
    });
    pauseBtn.addEventListener('click', function() {
        video.pause(); // 暂停视频
    });
    // 监听视频播放结束事件
    video.addEventListener('ended', function() {
        alert('视频播放完毕！');
    });
</script>

代码解释：

  • document.getElementById('myVideo'): 获取 ID 为 myVideo 的视频元素。
  • video.play(): 调用视频的 play() 方法来播放视频。
  • video.pause(): 调用视频的 pause() 方法来暂停视频。
  • video.addEventListener('ended', ...): 监听视频的 ended 事件，当视频播放完成时,执行指定的函数。

使用 CSS 美化视频控件

你可以使用 CSS 来定制视频的外观，例如隐藏默认控件并创建自定义的播放按钮、进度条等，这是一个更高级的话题，但原理很简单：隐藏默认控件，然后用 HTML 和 CSS 创建自己的控件，最后用 JavaScript 来控制视频的播放状态。

示例：隐藏默认控件并添加自定义播放按钮

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">自定义视频控件</title>
    <style>
        /* 隐藏默认控件 */
        video {
            width: 600px;
            /* 关键：隐藏浏览器默认的控件 */
            controls: none; 
        }
        /* 自定义播放/暂停按钮样式 */
        #customPlayBtn {
            width: 60px;
            height: 60px;
            background-color: rgba(0, 0, 0, 0.7);
            color: white;
            border: none;
            border-radius: 50%;
            cursor: pointer;
            font-size: 24px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 10;
        }
        /* 让按钮在鼠标悬停时变大 */
        #customPlayBtn:hover {
            transform: translate(-50%, -50%) scale(1.1);
        }
        /* 将按钮放在视频容器内 */
        .video-container {
            position: relative;
            display: inline-block;
        }
    </style>
</head>
<body>
    <h1>自定义视频控件</h1>
    <div class="video-container">
        <video id="customVideo">
            <source src="my-video.mp4" type="video/mp4">
        </video>
        <button id="customPlayBtn">▶</button>
    </div>
    <script>
        const video = document.getElementById('customVideo');
        const playBtn = document.getElementById('customPlayBtn');
        playBtn.addEventListener('click', function() {
            if (video.paused) {
                video.play();
                playBtn.innerHTML = '⏸'; // 切换为暂停图标
            } else {
                video.pause();
                playBtn.innerHTML = '▶'; // 切换为播放图标
            }
        });
        // 当视频播放时，隐藏按钮；暂停时显示按钮
        video.addEventListener('play', function() {
            playBtn.style.display = 'none';
        });
        video.addEventListener('pause', function() {
            playBtn.style.display = 'block';
        });
    </script>
</body>
</html>
  1. 入门: 使用 <video src="..."></video> 添加视频。
  2. 体验: 添加 controls 属性来让用户能控制视频。
  3. 兼容: 使用 <source> 标签提供多种视频格式（.mp4, .webm）。
  4. 交互: 使用 JavaScript 通过 id 获取视频元素，并调用其 play()、pause() 等方法。
  5. 高级: 使用 CSS 隐藏默认控件，并用 HTML/CSS/JS 创建自己的自定义控件。

对于大多数情况，使用带有 controls 属性的 <source> 标签组合就足够了。