10、网页中插入音视频文件（audio&video）
2022-05-25 本文已影响0人
小黄不头秃
一、概述
(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>
