一、概述

(1) 音频文件

<audio>标签用来向页面中引入一个外部的音频文件,引入时不允许用户控制。
属性：

controls：是否允许用户控制播放；
autoplay：音频文件是否自动播放
autoplay：如果设置了，则音乐在打开页面时会自动播放，但大部分不会自动播放
loop 音乐是否循环播放
除了可以通过src属性来制定路径以外，还可以通过<source>标签来指定,也可以解决浏览器之间的兼容性问题

如果第一个资源不支持，自动转到第二个；

对于老版本的浏览器( IE )可以使用：
<embed>标签

（2）视频标签

视频播放video标签，引入一个视频文件

使用方式基本和audio一样

二、代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>音视频播放</title>
</head>
<body>
    <!-- 
        音视频文件引入
     -->
     <h1>音频播放</h1>
     <audio src="./music/1.mp3" controls autoplay></audio>
     <br><br>
     <audio controls>
         sorry,please update your ie!
         <source src="./music/1.mp3">
         <source src="./music/1.ogg">  
     </audio>
     <br><br>
     <embed src="./music/2.mp3" type="audio/mp3" width="400" height="100" >
        <br><br>
        <!-- 
            视频引入
         -->
    <video src="./video/1.mp4" controls loop autoplay></video>
    <br><br>
    <video controls loop autoplay>
        <source src="./video/1.mp4">
        <embed src="./video/1.mp4" type="video/mp4" width="400" height="100" >
    </video>
    <br><br>
    <iframe src="https://v.qq.com/txp/iframe/player.html?vid=f0033ep0p6k" width ="500" height="400" allowFullScreen="true"></iframe></iframe>
</body>
</html>