HTML5 Video 完整教程

HTML5 的 <video> 元素提供了原生的视频播放能力，无需依赖任何插件。

基本用法

基础 Video 示例

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

常用属性

属性	说明
`controls`	显示播放控制条
`autoplay`	自动播放（需配合muted）
`loop`	循环播放
`muted`	静音播放
`poster`	视频封面图片

视频格式

建议同时提供 MP4 和 WebM 两种格式以获得最佳兼容性：

多格式视频源

<video controls>
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
</video>

JavaScript API

常用方法

var video = document.getElementById("myVideo");

// 播放/暂停
video.play();
video.pause();

// 跳转（秒）
video.currentTime = 30;

// 音量（0-1）
video.volume = 0.5;

// 播放速率
video.playbackRate = 1.5;

常用事件

事件监听

video.addEventListener("play", () => console.log("播放"));
video.addEventListener("pause", () => console.log("暂停"));
video.addEventListener("ended", () => console.log("结束"));
video.addEventListener("timeupdate", () => console.log(video.currentTime));

自定义播放器

简单自定义播放器

<video id="player" src="video.mp4"></video>
<button onclick="togglePlay()">播放/暂停</button>
<input type="range" oninput="seek(this.value)">

<script>
var video = document.getElementById("player");
function togglePlay() {
    video.paused ? video.play() : video.pause();
}
function seek(val) {
    video.currentTime = val;
}
</script>

常见问题

视频无法自动播放？

现代浏览器要求视频必须静音才能自动播放：<video autoplay muted>

如何实现全屏播放？

全屏播放

video.requestFullscreen(); // 进入全屏
document.exitFullscreen();  // 退出全屏

💻 在线代码编辑器

👁️ 预览效果