HTML5 Audio/Video 标签、属性、方法、事件汇总

HTML5 <audio> 和 <video> 标签用于在网页中嵌入音频和视频内容。

以下是这两个标签的常用属性、方法和事件的概述：

<audio> 标签属性：

• src：音频文件的URL。
• controls：显示标准的音频控制界面。
• autoplay：音频就绪时自动播放。
• loop：循环播放音频。
• muted：静音播放。

<video> 标签属性：

• src：视频文件的URL。
• poster：视频加载时显示的图像，通常是视频的帧。
• controls：显示标准的视频控制界面。
• autoplay：视频就绪时自动播放。
• loop：循环播放视频。
• muted：静音播放。
• width 和 height：视频的宽度和高度。

属性操作：

• 通过JavaScript可以获取和设置这些属性。

<audio> 和 <video> 标签方法：

• play()：播放音频/视频。
• pause()：暂停播放。

<audio> 和 <video> 标签事件：

• play：当音频/视频开始播放时触发。
• pause：当音频/视频暂停时触发。
• ended：当音频/视频播放结束时触发。

事件监听：

• 可以通过JavaScript为这些事件添加事件监听器。

示例代码：

<!-- Audio 标签示例 -->
<audio src="song.mp3" controls autoplay loop muted></audio>
 
<!-- Video 标签示例 -->
<video src="movie.mp4" poster="poster.jpg" controls autoplay loop width="640" height="480"></video>
 
<script>
// 获取音频元素
var audio = document.querySelector('audio');
 
// 播放音频
function playAudio() {
    audio.play();
}
 
// 暂停音频
function pauseAudio() {
    audio.pause();
}
 
// 监听音频播放事件
audio.addEventListener('play', function() {
    console.log('Audio is playing.');
});
 
// 监听音频暂停事件
audio.addEventListener('pause', function() {
    console.log('Audio is paused.');
});
</script>

以上代码演示了如何在HTML中嵌入音频和视频，并通过JavaScript控制播放以及添加事件监听器。