您可以直接复制下面的代码，保存为 .html 文件,然后用浏览器打开即可看到效果。

html5视频播放网页模版
（图片来源网络，侵删）

功能特点

  • 响应式设计: 适配桌面、平板和手机等各种屏幕尺寸。
  • 自定义控制器: 美观、功能齐全的播放控制器，包含播放/暂停、进度条、音量、时间显示等。
  • 高级功能: 支持画中画 模式和全屏 播放。
  • 键盘快捷键: 支持空格键播放/暂停，方向键快进/快退。
  • 移动端优化: 触摸友好的控制界面,自动隐藏控制器以获得沉浸式体验。
  • 加载动画: 视频加载时显示加载指示器。
  • 清晰注释: 代码中包含详细的注释,方便您理解和修改。

HTML5 视频播放网页模板代码

<!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>
        /* --- 全局样式 --- */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            background-color: #111;
            color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }
        /* --- 视频容器 --- */
        .video-container {
            position: relative;
            max-width: 900px;
            width: 100%;
            background-color: #000;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
        }
        /* --- 视频元素 --- */
        video {
            width: 100%;
            display: block;
            /* 防止在移动设备上出现双击缩放 */
            touch-action: manipulation;
        }
        /* --- 加载动画 --- */
        .video-loader {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 50px;
            height: 50px;
            border: 5px solid rgba(255, 255, 255, 0.3);
            border-radius: 50%;
            border-top-color: #fff;
            animation: spin 1s ease-in-out infinite;
            display: none; /* 默认隐藏，视频加载时显示 */
        }
        @keyframes spin {
            to { transform: translate(-50%, -50%) rotate(360deg); }
        }
        /* --- 视频控制器 --- */
        .video-controls {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
            padding: 20px;
            transform: translateY(100%); /* 默认隐藏 */
            transition: transform 0.3s ease-in-out;
        }
        /* 当视频容器被悬停或视频正在播放时，显示控制器 */
        .video-container:hover .video-controls,
        .video-container.playing .video-controls {
            transform: translateY(0);
        }
        /* 控制器内容布局 */
        .controls-content {
            display: flex;
            align-items: center;
            gap: 15px;
        }
        /* 播放/暂停按钮 */
        .play-pause-btn {
            background: none;
            border: none;
            color: #fff;
            cursor: pointer;
            font-size: 24px;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            transition: background-color 0.2s;
        }
        .play-pause-btn:hover {
            background-color: rgba(255, 255, 255, 0.1);
        }
        /* 进度条容器 */
        .progress-container {
            flex-grow: 1;
            height: 6px;
            background-color: rgba(255, 255, 255, 0.2);
            border-radius: 3px;
            cursor: pointer;
            position: relative;
        }
        /* 进度条 */
        .progress-bar {
            height: 100%;
            background-color: #e50914;
            border-radius: 3px;
            width: 0%;
            position: relative;
        }
        /* 进度条上的拖动手柄 */
        .progress-bar::after {
            content: '';
            position: absolute;
            right: -6px;
            top: 50%;
            transform: translateY(-50%);
            width: 12px;
            height: 12px;
            background-color: #fff;
            border-radius: 50%;
            opacity: 0;
            transition: opacity 0.2s;
        }
        .progress-container:hover .progress-bar::after {
            opacity: 1;
        }
        /* 时间显示 */
        .time-display {
            color: #fff;
            font-size: 12px;
            min-width: 100px;
            text-align: right;
        }
        /* 音量控制 */
        .volume-container {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .volume-slider {
            width: 0;
            opacity: 0;
            transition: width 0.3s, opacity 0.3s;
            cursor: pointer;
        }
        .volume-container:hover .volume-slider {
            width: 80px;
            opacity: 1;
        }
        .volume-slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 12px;
            height: 12px;
            background-color: #fff;
            border-radius: 50%;
            cursor: pointer;
        }
        .volume-slider::-moz-range-thumb {
            width: 12px;
            height: 12px;
            background-color: #fff;
            border-radius: 50%;
            cursor: pointer;
            border: none;
        }
        /* 右侧按钮组 */
        .right-controls {
            display: flex;
            gap: 10px;
        }
        .right-controls button {
            background: none;
            border: none;
            color: #fff;
            cursor: pointer;
            font-size: 18px;
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 4px;
            transition: background-color 0.2s;
        }
        .right-controls button:hover {
            background-color: rgba(255, 255, 255, 0.1);
        }
        /* --- 全屏模式样式 --- */
        .video-container:fullscreen {
            max-width: 100%;
        }
        .video-container:-webkit-full-screen {
            max-width: 100%;
        }
        .video-container:-moz-full-screen {
            max-width: 100%;
        }
        .video-container:-ms-fullscreen {
            max-width: 100%;
        }
        /* --- 移动端优化 --- */
        @media (max-width: 768px) {
            .controls-content {
                gap: 10px;
            }
            .time-display {
                display: none; /* 在小屏幕上隐藏时间显示 */
            }
            .volume-container {
                display: none; /* 在小屏幕上隐藏音量控制 */
            }
        }
    </style>
</head>
<body>
    <main class="video-container" id="videoContainer">
        <!-- 
            source 标签可以指定多个视频源，浏览器会选择它支持的首个格式。
            推荐使用 mp4 (H.264编码) 作为兼容性最好的选择。
        -->
        <video id="myVideo">
            <source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
            您的浏览器不支持 HTML5 视频。
        </video>
        <!-- 加载动画 -->
        <div class="video-loader" id="loader"></div>
        <!-- 自定义控制器 -->
        <div class="video-controls" id="videoControls">
            <div class="controls-content">
                <!-- 播放/暂停按钮 -->
                <button class="play-pause-btn" id="playPauseBtn">▶</button>
                <!-- 进度条 -->
                <div class="progress-container" id="progressContainer">
                    <div class="progress-bar" id="progressBar"></div>
                </div>
                <!-- 时间显示 -->
                <div class="time-display" id="timeDisplay">0:00 / 0:00</div>
                <!-- 音量控制 -->
                <div class="volume-container">
                    <button class="play-pause-btn" id="muteBtn">🔊</button>
                    <input type="range" class="volume-slider" id="volumeSlider" min="0" max="1" step="0.01" value="1">
                </div>
                <!-- 右侧按钮组 -->
                <div class="right-controls">
                    <!-- 画中画按钮 -->
                    <button id="pipBtn">🖼️</button>
                    <!-- 全屏按钮 -->
                    <button id="fullscreenBtn">⛶</button>
                </div>
            </div>
        </div>
    </main>
    <script>
        // 获取页面上的所有元素
        const video = document.getElementById('myVideo');
        const videoContainer = document.getElementById('videoContainer');
        const videoControls = document.getElementById('videoControls');
        const playPauseBtn = document.getElementById('playPauseBtn');
        const progressContainer = document.getElementById('progressContainer');
        const progressBar = document.getElementById('progressBar');
        const timeDisplay = document.getElementById('timeDisplay');
        const muteBtn = document.getElementById('muteBtn');
        const volumeSlider = document.getElementById('volumeSlider');
        const pipBtn = document.getElementById('pipBtn');
        const fullscreenBtn = document.getElementById('fullscreenBtn');
        const loader = document.getElementById('loader');
        // --- 播放/暂停功能 ---
        function togglePlayPause() {
            if (video.paused) {
                video.play();
                playPauseBtn.textContent = '⏸';
                videoContainer.classList.add('playing');
            } else {
                video.pause();
                playPauseBtn.textContent = '▶';
                videoContainer.classList.remove('playing');
            }
        }
        playPauseBtn.addEventListener('click', togglePlayPause);
        // --- 更新进度条 ---
        function updateProgress() {
            const percentage = (video.currentTime / video.duration) * 100;
            progressBar.style.width = `${percentage}%`;
            // 更新时间显示
            const currentTime = formatTime(video.currentTime);
            const duration = formatTime(video.duration);
            timeDisplay.textContent = `${currentTime} / ${duration}`;
        }
        video.addEventListener('timeupdate', updateProgress);
        // --- 点击进度条跳转 ---
        function setProgress(e) {
            const width = this.clientWidth;
            const clickX = e.offsetX;
            const duration = video.duration;
            video.currentTime = (clickX / width) * duration;
        }
        progressContainer.addEventListener('click', setProgress);
        // --- 时间格式化函数 ---
        function formatTime(seconds) {
            if (isNaN(seconds)) return '0:00';
            const minutes = Math.floor(seconds / 60);
            const remainingSeconds = Math.floor(seconds % 60);
            return `${minutes}:${remainingSeconds < 10 ? '0' : ''}${remainingSeconds}`;
        }
        // --- 音量控制 ---
        function toggleMute() {
            if (video.muted) {
                video.muted = false;
                muteBtn.textContent = '🔊';
                volumeSlider.value = video.volume;
            } else {
                video.muted = true;
                muteBtn.textContent = '🔇';
            }
        }
        muteBtn.addEventListener('click', toggleMute);
        volumeSlider.addEventListener('input', (e) => {
            video.volume = e.target.value;
            if (e.target.value == 0) {
                muteBtn.textContent = '🔇';
            } else {
                muteBtn.textContent = '🔊';
            }
        });
        // --- 画中画 功能 ---
        async function togglePip() {
            try {
                if (document.pictureInPictureElement) {
                    await document.exitPictureInPicture();
                } else if (document.pictureInPictureEnabled) {
                    await video.requestPictureInPicture();
                }
            } catch (error) {
                console.error('画中画功能出错:', error);
            }
        }
        pipBtn.addEventListener('click', togglePip);
        // --- 全屏功能 ---
        function toggleFullscreen() {
            if (!document.fullscreenElement) {
                videoContainer.requestFullscreen().catch(err => {
                    console.error(`全屏请求错误: ${err.message}`);
                });
            } else {
                document.exitFullscreen();
            }
        }
        fullscreenBtn.addEventListener('click', toggleFullscreen);
        // --- 键盘快捷键 ---
        document.addEventListener('keydown', (e) => {
            // 空格键播放/暂停
            if (e.code === 'Space' && e.target.tagName !== 'INPUT') {
                e.preventDefault();
                togglePlayPause();
            }
            // 左右方向键快进/快退 5 秒
            if (e.code === 'ArrowLeft') {
                video.currentTime = Math.max(0, video.currentTime - 5);
            }
            if (e.code === 'ArrowRight') {
                video.currentTime = Math.min(video.duration, video.currentTime + 5);
            }
            // 'f' 键全屏
            if (e.code === 'KeyF') {
                toggleFullscreen();
            }
            // 'm' 键静音
            if (e.code === 'KeyM') {
                toggleMute();
            }
        });
        // --- 视频加载状态处理 ---
        video.addEventListener('loadstart', () => {
            loader.style.display = 'block';
        });
        video.addEventListener('canplay', () => {
            loader.style.display = 'none';
        });
        video.addEventListener('waiting', () => {
            loader.style.display = 'block';
        });
        video.addEventListener('playing', () => {
            loader.style.display = 'none';
        });
    </script>
</body>
</html>

如何使用和自定义

  1. 保存文件: 将上面的全部代码复制并粘贴到一个新的文本文件中，将其命名为 video-player.html 或任何你喜欢的 .html 文件名。

  2. 替换视频源:

    • 找到 <video> 标签中的 <source>
    • 将 src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" 替换为你自己的视频文件链接。
    • 如果你的视频是其他格式（如 .webm 或 .ogg），可以再添加一个 <source> 标签以提高兼容性：
      <source src="your-video.mp4" type="video/mp4">
<source src="your-video.webm" type="video/webm">

  3. 自定义样式:

    • 你可以修改 <style> 部分中的 CSS 代码来改变播放器的外观。
    • 修改 background-color: #e50914; 可以改变进度条的颜色。
    • 修改 font-family 可以改变字体。

  4. 高级功能说明:

    html5视频播放网页模版
    （图片来源网络，侵删）
    • 画中画: 需要在 HTTPS 环境下或 localhost 才能正常工作。
    • 键盘快捷键: 在页面上按下空格、方向键、F 和 M 键可以快速控制播放器。
    • 移动端交互: 在手机上，控制器会在触摸屏幕时显示，几秒后自动隐藏,提供沉浸式体验。

这个模板为你提供了一个功能强大且外观现代的视频播放器基础,你可以根据需要进行进一步的扩展和定制。