html5 播放视频模板-网站模板-锦华智联科技

模板 1：基础版本 (最常用)

这是最核心、最简洁的实现方式，兼容所有现代浏览器。

（图片来源网络，侵删）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">HTML5 基础视频播放</title>
    <style>
        /* 基础样式，让视频居中 */
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        video {
            max-width: 100%;
            height: auto;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }
    </style>
</head>
<body>
    <video src="path/to/your/video.mp4" controls width="800">
        <!-- 如果浏览器不支持 video 标签，则显示此内容 -->
        您的浏览器不支持 HTML5 视频。
    </video>
</body>
</html>

模板 2：多格式与海报图版本 (更健壮)

为了确保视频能在不同浏览器中播放,最好提供多种视频格式（如 .mp4, .webm, .ogg），使用 poster 属性可以在视频加载前显示一张预览图。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">HTML5 多格式视频播放</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #222;
        }
        .video-container {
            max-width: 900px;
            width: 100%;
        }
        video {
            width: 100%;
            border-radius: 8px;
        }
    </style>
</head>
<body>
    <div class="video-container">
        <video controls poster="path/to/your/poster.jpg">
            <!-- 
                浏览器会按顺序尝试加载，直到找到一个它支持的格式。
                通常把 MP4 放在最后，因为它是兼容性最好的。
            -->
            <source src="path/to/your/video.webm" type="video/webm">
            <source src="path/to/your/video.ogv" type="video/ogg">
            <source src="path/to/your/video.mp4" type="video/mp4">
            <!-- 如果所有格式都不支持，则显示此内容 -->
            您的浏览器不支持 HTML5 视频，请升级您的浏览器。
        </video>
    </div>
</body>
</html>

模板 3：带 JavaScript 控制的版本 (更高级)

这个模板展示了如何使用 JavaScript 来控制视频的播放、暂停、静音、获取当前时间等，这对于创建自定义播放器界面非常有用。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">HTML5 视频与 JavaScript 控制</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #333;
            color: #fff;
        }
        .video-wrapper {
            margin-bottom: 20px;
        }
        video {
            border-radius: 8px;
            max-width: 800px;
            width: 100%;
        }
        .controls {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            justify-content: center;
        }
        button {
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
            border: none;
            border-radius: 5px;
            background-color: #007bff;
            color: white;
            transition: background-color 0.3s;
        }
        button:hover {
            background-color: #0056b3;
        }
        #volumeSlider {
            width: 150px;
        }
        #progressBar {
            width: 800px;
            max-width: 90%;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div class="video-wrapper">
        <video id="myVideo" width="800">
            <source src="path/to/your/video.mp4" type="video/mp4">
            您的浏览器不支持 HTML5 视频。
        </video>
    </div>
    <div class="controls">
        <button id="playPauseBtn">播放</button>
        <button id="muteBtn">静音</button>
        <input type="range" id="volumeSlider" min="0" max="1" step="0.1" value="1">
        <button id="restartBtn">重新开始</button>
    </div>
    <div>
        <input type="range" id="progressBar" min="0" max="100" value="0">
    </div>
    <script>
        // 获取 video 元素和所有控制按钮
        const video = document.getElementById('myVideo');
        const playPauseBtn = document.getElementById('playPauseBtn');
        const muteBtn = document.getElementById('muteBtn');
        const volumeSlider = document.getElementById('volumeSlider');
        const restartBtn = document.getElementById('restartBtn');
        const progressBar = document.getElementById('progressBar');
        // 1. 播放/暂停
        playPauseBtn.addEventListener('click', () => {
            if (video.paused) {
                video.play();
                playPauseBtn.textContent = '暂停';
            } else {
                video.pause();
                playPauseBtn.textContent = '播放';
            }
        });
        // 2. 静音/取消静音
        muteBtn.addEventListener('click', () => {
            video.muted = !video.muted;
            muteBtn.textContent = video.muted ? '取消静音' : '静音';
        });
        // 3. 调节音量
        volumeSlider.addEventListener('input', () => {
            video.volume = volumeSlider.value;
        });
        // 4. 重新开始
        restartBtn.addEventListener('click', () => {
            video.currentTime = 0;
            video.play();
            playPauseBtn.textContent = '暂停';
        });
        // 5. 更新进度条
        video.addEventListener('timeupdate', () => {
            const percentage = (video.currentTime / video.duration) * 100;
            progressBar.value = percentage;
        });
        // 6. 允许用户通过拖动进度条来跳转
        progressBar.addEventListener('input', () => {
            const time = (progressBar.value / 100) * video.duration;
            video.currentTime = time;
        });
        // 7. 视频结束时，重置播放按钮
        video.addEventListener('ended', () => {
            playPauseBtn.textContent = '播放';
        });
    </script>
</body>
</html>

核心标签与属性详解

标签/属性	描述
`<video>`	定义视频播放器。
`src`	指定视频文件的 URL。
`controls`	显示浏览器自带的播放控件（播放/暂停、音量、进度条等）。
`width`, `height`	设置视频的宽度和高度。
`autoplay`	视频在就绪后立即播放。注意：许多现代浏览器会阻止自动播放，除非视频是静音的 (`muted`)。
`muted`	设置视频默认为静音状态。
`loop`	视频结束后，重新开始播放。
`poster`	指定视频加载时或用户点击播放前显示的图片 URL。
`<source>`	为 `<video>` 或 `<audio>` 元素定义多个媒体资源，浏览器将使用第一个它所支持的格式。
`src`	指定媒体文件的 URL。
`type`	指定媒体资源的 MIME 类型，`video/mp4`, `video/webm`, `video/ogg`，这可以帮助浏览器快速选择正确的文件，无需下载和检查。

常见视频格式

MP4 (.mp4)
- MIME 类型: video/mp4
- 描述: 目前最通用、兼容性最好的格式，基于 H.264/AVC 视频编码和 AAC 音频编码，几乎所有现代浏览器都支持。
WebM (.webm)
（图片来源网络，侵删）
- MIME 类型: video/webm
- 描述: 由 Google 推出，是一个开放、免费的视频格式，通常文件体积比 MP4 小，在 Chrome, Firefox, Edge 等浏览器中表现优异。
Ogg (.ogv)
- MIME 类型: video/ogg
- 描述: 一个开放、免费的容器格式，主要在 Firefox 等基于 Gecko 的浏览器中得到支持，WebM 已基本取代了它的地位。

最佳实践建议

始终使用 <source> 为了最大化兼容性，至少提供 MP4 和 WebM 两种格式。

使用 poster 属性：提供一个吸引人的预览图，可以提升用户体验，并在视频加载时显示内容。添加控件：除非你有特殊需求并提供了自定义控件，否则请始终添加 controls 属性，让用户能够控制视频。考虑可访问性：为视频添加字幕或字幕文件 (<track>)，方便听障人士理解内容。响应式设计：像模板 2 和 3 中那样，设置 width: 100% 和 max-width，确保视频在不同屏幕尺寸的设备上都能良好显示。

希望这些模板和解释能帮助你快速上手 HTML5 视频播放！

html5 播放 视频 模板