HTML视频与音频嵌入

HTML5提供原生多媒体支持，无需插件即可嵌入音视频。

video标签

基本用法

<video src="video.mp4" controls width="640" height="360">
  您的浏览器不支持视频标签
</video>

多格式兼容

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

常用属性

audio标签

基本用法

<audio src="audio.mp3" controls>
  您的浏览器不支持音频标签
</audio>

多格式兼容

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  <source src="audio.ogg" type="audio/ogg">
  <source src="audio.wav" type="audio/wav">
  您的浏览器不支持音频标签
</audio>

常用属性

格式兼容性

视频格式

音频格式

提供多格式源确保跨浏览器兼容，MP4/MP3为首选格式。

JavaScript API

播放控制

const video = document.querySelector('video');

video.play();        // 播放
video.pause();       // 暂停
video.load();        // 重新加载

// 属性
video.currentTime = 30;    // 跳转到30秒
video.volume = 0.5;        // 音量50%
video.playbackRate = 1.5;  // 1.5倍速

事件监听

video.addEventListener('play', () => console.log('开始播放'));
video.addEventListener('pause', () => console.log('暂停'));
video.addEventListener('ended', () => console.log('播放结束'));
video.addEventListener('timeupdate', () => {
  console.log('当前时间:', video.currentTime);
});

自动播放策略

现代浏览器限制自动播放，需满足：

1. 必须静音：添加muted属性
2. 用户交互：用户点击后触发播放
3. 媒体参与指数：用户经常访问的站点可自动播放

<!-- 静音自动播放 -->
<video autoplay muted loop playsinline>
  <source src="background.mp4" type="video/mp4">
</video>

自动播放必须配合muted使用，否则会被浏览器阻止。

要点总结

• video/audio支持多source格式兼容
• controls属性显示浏览器原生控件
• autoplay需配合muted才能生效
• preload控制预加载策略
• JavaScript API提供完整播放控制
• 提供fallback内容确保兼容性