文章目录
- 本地文件
- audio标签
- 测试IE8浏览器的方法
- source标签
- source的好处
- video标签
本地文件
在文件source中引入音频文件：
audio标签
audio 标签用来向页面中引入一个外部的音频文件的音视频文件引入时，默认情况下不允许用户自己控制播放停止。
<audio src="./source/audio.mp3"></audio>得到的是空白的东西
属性：controls 是否允许用户控制。
播放增加一个控制器就是在后面加controls
<audio src="./source/audio.mp3" controls></audio>就会出现一个音频播放器
点击播放，就会播放音频。
属性： autoplay 音频文件是否自动播放
- 如果设置了autoplay 则音乐在打开页面时会自动播放
但是目前来讲大部分浏览器都不会自动对音乐进行播放
属性：loop 音乐是否循环播放
<audio src="./source/audio.mp3" controls autoplay loop></audio>audio标签只支持IE9以上浏览器
测试IE8浏览器的方法
<audio src="./source/audio.mp3" controls></audio>以下是默认用IE11打开的音频。
点击F12（或Fn+F12）
点击选择IE8的时候
存在报错，提醒升级浏览器。
source标签
除了通过src来指定外部文件的路径以外，还可以通过source来指定文件的路径。
以下这两种方法是一样的
source的好处
- 当浏览器不支持时，可以显示提示文字，比较友好。
<audio controls>
对不起，您的浏览器不支持播放音频！请升级浏览器！
<source src="./source/audio.mp3">
<audio/>
2. source可以有效解决浏览器兼容问题。
可以指定多个文件，优先使用第一个，如果第一个成功，就使用第一个，若第一个失败，就用第二个，如果第二个不行，就显示“ 对不起，您的浏览器不支持播放音频！请升级浏览器！”
<audio controls>
对不起，您的浏览器不支持播放音频！请升级浏览器！
<source src="./source/audio.mp3">
<source src="./source/audio.ogg">
</audio>在很多浏览器是可以兼容的，但是会自动播放，且在IE8浏览器时会压缩播放器
<embed src="./source/audio.mp3" type="">
必须指定width和height才能显示
<embed src="./source/audio.mp3" type="" width="300" height="100">
但是对于其他浏览器来说，光是指定width和height也不够，用起来不是很方便。
如果要调到稳定，最好添加上type标签，type是用来指定播放类型的。
其实不是很推荐使用embed标签，但是该标签可以同时和上述source的放一起，就可以在IE8浏览器中使用，在IE8以下的浏览器不支持时，显示“ 对不起，您的浏览器不支持播放音频！请升级浏览器！ ”
<audio controls>
对不起，您的浏览器不支持播放音频！请升级浏览器！
<source src="./source/audio.mp3">
<source src="./source/audio.ogg">
<embed src="./source/audio.mp3" type="audio/mp3" width="300" height="100">
</audio>video标签
使用video标签来向网页中引入一个视频
- 使用方式和audio基本上是一样的<video controls>
<source src="./source/flower.webm">
<source src="./source/flower.mp4">
<embed src="./source/flower.mp4" type="video/mp4">
</video>
现实开发中，网上弄个服务器或IP，都是要花钱的。假如自己做个网站，可能就要去百度云或者阿里云，腾讯云，京东云这些供应商去买服务器，主要包括服务器和带宽网络，即，别人要访问你的网络，等同于你在给别人传东西，所以要去买网络，别人才能有网络去访问你的服务器，相当于买宽带，所以是要收费的。也可以将视频上传到视频网站中，再将页面引进来，直接复制代码，这相当于直接访问腾讯的服务器，不用占用自身内存和带宽。
<iframe frameborder="0" src="https://v.qq.com/txp/iframe/player.html?vid=b00318l66nt" allowFullScreen="true" width="500" height="300"></iframe>
笔记代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!--
audio 标签用来向页面中引入一个外部的音频文件的
音视频文件引入时，默认情况下不允许用户自己控制播放停止
属性：
controls 是否允许用户控制播放
autoplay 音频文件是否自动播放
- 如果设置了autoplay 则音乐在打开页面时会自动播放
但是目前来讲大部分浏览器都不会自动对音乐进行播放
loop 音乐是否循环播放
-->
<!-- <audio src="./source/audio.mp3" controls autoplay loop></audio> -->
<!-- <audio src="./source/audio.mp3" controls></audio> -->
<!-- 除了通过src来指定外部文件的路径以外，还可以通过source来指定文件的路径 -->
<audio controls>
<!-- 对不起，您的浏览器不支持播放音频！请升级浏览器！ -->
<source src="./source/audio.mp3">
<source src="./source/audio.ogg">
<embed src="./source/audio.mp3" type="audio/mp3" width="300" height="100">
</audio>
<!--
使用video标签来向网页中引入一个视频
- 使用方式和audio基本上是一样的
-->
<video controls>
<source src="./source/flower.webm">
<source src="./source/flower.mp4">
<embed src="./source/flower.mp4" type="video/mp4">
</video>
<iframe frameborder="0" src="https://v.qq.com/txp/iframe/player.html?vid=b00318l66nt" allowFullScreen="true" width="500" height="300"></iframe>
</body>
</html>
