<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('音频播放结束');
});