HTML视频和音频

<video>元素

<video>元素用于在HTML文档中嵌入视频内容。

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

<video>元素属性

controls显示视频控制条（播放/暂停按钮、音量控制等）
autoplay页面加载后自动播放（注意：许多浏览器会阻止自动播放）
width设置视频播放器的宽度
height设置视频播放器的高度
loop视频播放完成后重新开始
muted默认静音
poster视频下载时或用户点击播放前显示的图像
preload页面加载时是否预加载视频

<video width="640" height="360" controls autoplay muted loop poster="preview.jpg">
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
  <track src="subtitles_zh.vtt" kind="subtitles" srclang="zh" label="中文">
  您的浏览器不支持 HTML5 视频。
</video>

HTML<audio>元素

<audio>元素用于在网页中嵌入音频内容，其用法与<video> 元素类似但更简单。

基本用法

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  <source src="audio.ogg" type="audio/ogg">
  您的浏览器不支持 HTML5 audio 元素。
</audio>

<audio>元素属性

controls显示音频控制条（播放/暂停按钮、音量控制等）
autoplay页面加载后自动播放（注意：许多浏览器会阻止自动播放）
loop音频播放完成后重新开始
muted默认静音
preload页面加载时是否预加载音频

<audio controls autoplay loop>
  <source src="sound.mp3" type="audio/mpeg">
  <source src="sound.ogg" type="audio/ogg">
  您的浏览器不支持 audio 元素。
</audio>

可以通过JavaScript API控制音频播放：

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

// 播放音频
audio.play();

// 暂停音频
audio.pause();

// 跳转到指定时间(秒)
audio.currentTime = 30;

// 设置音量(0.0-1.0)
audio.volume = 0.5;

// 监听事件
audio.addEventListener('ended', () => {
  console.log('音频播放结束');
});