HTML5 Video 基础
HTML5 引入了原生的 video 标签，使得在网页中嵌入视频变得前所未有的简单：
<video src="video.mp4" controls width="640" height="360"></video>常用属性
- controls - 显示播放控制条
- autoplay - 自动播放（浏览器可能阻止）
- loop - 循环播放
- muted - 静音
- poster - 封面图片 URL
- preload - 预加载策略（auto/metadata/none）
- playsinline - iOS 内联播放，不全屏
JavaScript API
var video = document.getElementById('myVideo');
// 播放控制
video.play();
video.pause();
video.currentTime = 10; // 跳到第10秒
// 事件监听
video.addEventListener('loadedmetadata', function() {
console.log('视频时长:', video.duration);
});
video.addEventListener('ended', function() {
console.log('播放结束');
});支持的格式
- MP4 - H.264 编码，最广泛兼容
- WebM - VP8/VP9 编码，Chrome/Firefox 支持
- Ogg - Theora 编码，开放格式
💡 提示：移动端浏览器通常只支持 MP4。HLS (M3U8) 需要使用专门的播放器库如 hls.js 或腾讯云 TCPlayer。
常见问题
自动播放被阻止？
现代浏览器默认阻止带声音的自动播放。可以使用 muted 属性或等待用户交互后再播放。
CORS 跨域问题？
视频文件和网页必须在同一域名下，或者服务器正确配置 CORS 头。