HTML5 Video

概述

HTML5 的 <video> 元素提供了在网页中嵌入视频的标准方式，无需依赖第三方插件（如 Flash）。

基本语法

html

<video src="movie.mp4" controls>
    您的浏览器不支持 video 标签。
</video>

视频属性

controls

显示播放控件（播放、暂停、音量等）：

html

<video src="movie.mp4" controls></video>

autoplay

自动播放视频（注意：大多数浏览器要求静音才能自动播放）：

html

<video src="movie.mp4" autoplay muted></video>

loop

循环播放：

html

<video src="movie.mp4" loop controls></video>

muted

静音播放：

html

<video src="movie.mp4" muted controls></video>

poster

视频封面图：

html

<video src="movie.mp4" poster="thumbnail.jpg" controls></video>

preload

预加载策略：

html

<!-- none: 不预加载 -->
<video src="movie.mp4" preload="none" controls></video>

<!-- metadata: 只预加载元数据 -->
<video src="movie.mp4" preload="metadata" controls></video>

<!-- auto: 预加载整个视频 -->
<video src="movie.mp4" preload="auto" controls></video>

width 和 height

设置视频尺寸：

html

<video src="movie.mp4" width="640" height="360" controls></video>

多格式支持

为了确保跨浏览器兼容性，提供多种视频格式：

html

<video width="640" height="360" controls>
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.webm" type="video/webm">
    <source src="movie.ogg" type="video/ogg">
    您的浏览器不支持 video 标签。
</video>

视频格式

格式	MIME 类型	文件扩展名	浏览器支持
MP4	video/mp4	.mp4	Chrome, Firefox, Safari, Edge
WebM	video/webm	.webm	Chrome, Firefox, Opera
Ogg	video/ogg	.ogg, .ogv	Firefox, Opera

完整属性示例

html

<video 
    src="movie.mp4"
    width="640"
    height="360"
    controls
    autoplay
    loop
    muted
    poster="thumbnail.jpg"
    preload="auto">
    您的浏览器不支持 video 标签。
</video>

JavaScript 控制

基本控制

html

<video id="myVideo" width="640" height="360">
    <source src="movie.mp4" type="video/mp4">
</video>

<button onclick="playVideo()">播放</button>
<button onclick="pauseVideo()">暂停</button>
<button onclick="stopVideo()">停止</button>

<script>
    var video = document.getElementById("myVideo");
    
    function playVideo() {
        video.play();
    }
    
    function pauseVideo() {
        video.pause();
    }
    
    function stopVideo() {
        video.pause();
        video.currentTime = 0;
    }
</script>

高级控制

html

<video id="myVideo" width="640" height="360">
    <source src="movie.mp4" type="video/mp4">
</video>

<div>
    <button onclick="playPause()">播放/暂停</button>
    <button onclick="makeBig()">放大</button>
    <button onclick="makeSmall()">缩小</button>
    <button onclick="makeNormal()">正常</button>
</div>

<script>
    var video = document.getElementById("myVideo");
    
    function playPause() {
        if (video.paused) {
            video.play();
        } else {
            video.pause();
        }
    }
    
    function makeBig() {
        video.width = 960;
        video.height = 540;
    }
    
    function makeSmall() {
        video.width = 320;
        video.height = 180;
    }
    
    function makeNormal() {
        video.width = 640;
        video.height = 360;
    }
</script>

视频事件

html

<video id="myVideo" width="640" height="360" controls>
    <source src="movie.mp4" type="video/mp4">
</video>

<p id="status"></p>

<script>
    var video = document.getElementById("myVideo");
    var status = document.getElementById("status");
    
    video.addEventListener("play", function() {
        status.textContent = "视频正在播放";
    });
    
    video.addEventListener("pause", function() {
        status.textContent = "视频已暂停";
    });
    
    video.addEventListener("ended", function() {
        status.textContent = "视频播放结束";
    });
    
    video.addEventListener("timeupdate", function() {
        var current = Math.floor(video.currentTime);
        var duration = Math.floor(video.duration);
        status.textContent = `播放进度: ${current}秒 / ${duration}秒`;
    });
</script>

自定义播放器

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自定义视频播放器</title>
    <style>
        .video-container {
            max-width: 640px;
            margin: 20px auto;
        }
        
        video {
            width: 100%;
            display: block;
        }
        
        .controls {
            background-color: #333;
            padding: 10px;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        button {
            background-color: #4CAF50;
            color: white;
            border: none;
            padding: 8px 16px;
            cursor: pointer;
            border-radius: 4px;
        }
        
        button:hover {
            background-color: #45a049;
        }
        
        .progress-bar {
            flex-grow: 1;
            height: 8px;
            background-color: #555;
            border-radius: 4px;
            cursor: pointer;
            position: relative;
        }
        
        .progress {
            height: 100%;
            background-color: #4CAF50;
            border-radius: 4px;
            width: 0%;
        }
        
        .time {
            color: white;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <div class="video-container">
        <video id="video">
            <source src="movie.mp4" type="video/mp4">
        </video>
        
        <div class="controls">
            <button id="playPause">播放</button>
            <div class="progress-bar" id="progressBar">
                <div class="progress" id="progress"></div>
            </div>
            <span class="time" id="time">0:00 / 0:00</span>
            <button id="fullscreen">全屏</button>
        </div>
    </div>
    
    <script>
        const video = document.getElementById('video');
        const playPause = document.getElementById('playPause');
        const progressBar = document.getElementById('progressBar');
        const progress = document.getElementById('progress');
        const time = document.getElementById('time');
        const fullscreen = document.getElementById('fullscreen');
        
        // 播放/暂停
        playPause.addEventListener('click', () => {
            if (video.paused) {
                video.play();
                playPause.textContent = '暂停';
            } else {
                video.pause();
                playPause.textContent = '播放';
            }
        });
        
        // 更新进度条
        video.addEventListener('timeupdate', () => {
            const percent = (video.currentTime / video.duration) * 100;
            progress.style.width = percent + '%';
            
            const currentMin = Math.floor(video.currentTime / 60);
            const currentSec = Math.floor(video.currentTime % 60);
            const durationMin = Math.floor(video.duration / 60);
            const durationSec = Math.floor(video.duration % 60);
            
            time.textContent = `${currentMin}:${currentSec.toString().padStart(2, '0')} / ${durationMin}:${durationSec.toString().padStart(2, '0')}`;
        });
        
        // 点击进度条跳转
        progressBar.addEventListener('click', (e) => {
            const rect = progressBar.getBoundingClientRect();
            const percent = (e.clientX - rect.left) / rect.width;
            video.currentTime = percent * video.duration;
        });
        
        // 全屏
        fullscreen.addEventListener('click', () => {
            if (video.requestFullscreen) {
                video.requestFullscreen();
            } else if (video.webkitRequestFullscreen) {
                video.webkitRequestFullscreen();
            } else if (video.msRequestFullscreen) {
                video.msRequestFullscreen();
            }
        });
        
        // 视频结束
        video.addEventListener('ended', () => {
            playPause.textContent = '播放';
        });
    </script>
</body>
</html>

响应式视频

html

<style>
    .video-wrapper {
        position: relative;
        padding-bottom: 56.25%; /* 16:9 宽高比 */
        height: 0;
        overflow: hidden;
    }
    
    .video-wrapper video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
</style>

<div class="video-wrapper">
    <video controls>
        <source src="movie.mp4" type="video/mp4">
    </video>
</div>

字幕支持

html

<video width="640" height="360" controls>
    <source src="movie.mp4" type="video/mp4">
    <track 
        kind="subtitles" 
        src="subtitles_zh.vtt" 
        srclang="zh" 
        label="中文"
        default>
    <track 
        kind="subtitles" 
        src="subtitles_en.vtt" 
        srclang="en" 
        label="English">
</video>

最佳实践

提供多种格式：确保跨浏览器兼容性
使用 poster 属性：提供视频封面图
优化文件大小：压缩视频以提高加载速度
避免自动播放：除非必要且静音
提供字幕：提高无障碍访问性
响应式设计：适配不同屏幕尺寸
提供替代内容：为不支持的浏览器提供说明

总结

HTML5 Video 元素为网页视频播放提供了强大而灵活的解决方案。通过合理使用其属性和 JavaScript API，可以创建功能丰富的视频播放体验。

HTML5 Video ​

概述 ​

基本语法 ​

视频属性 ​

controls ​

autoplay ​

loop ​

muted ​

poster ​

preload ​

width 和 height ​

多格式支持 ​

视频格式 ​

完整属性示例 ​

JavaScript 控制 ​

基本控制 ​

高级控制 ​

视频事件 ​

自定义播放器 ​

响应式视频 ​

字幕支持 ​

最佳实践 ​

总结 ​

HTML5 Video

概述

基本语法

视频属性

controls

autoplay

loop

muted

poster

preload

width 和 height

多格式支持

视频格式

完整属性示例

JavaScript 控制

基本控制

高级控制

视频事件

自定义播放器

响应式视频

字幕支持

最佳实践

总结