本文共 1203 字，大约阅读时间需要 4 分钟。

标签audio

audio：向网页中引入一个外部音频文件

音视频引入时，默认用户无法操作，得加controls属性。 autoplay属性设置是否自动播放（但是这个属性好像有问题，在打开页面时它会自动播放，但是刷新后不大行（我用的edge好像可以），视频老师说是用户体验问题，我也不细讲了。） loop：是否循环播放

标签source

除了通过src来指定外部文件的路径以外，还可以通过source来指定文件的路径 。

为什么有了audio还要source呢？当你的浏览器版本不兼容（zeal里可以查到）时，可以经过一些操作让我们知道。怎么操作呢？看下面代码。

当浏览器不支持audio和source是时，audio会被浏览器忽略掉，然后那段文字就会显示出来，如果支持，则那段文字不会被显示出来。看下图，因为我的浏览器是支持的，所以文字没有显示出来（我没有ie浏览器，没法想视频里一样测试不支持的情况）

使用cource还有一个好处，有一些浏览器不支持mp3，有一些则不支持ogg，这个时候我们可以两个都写进去，浏览器优先显示第一个，如果第一个失败了，则显示第二个。代码如下：

embed

如视频里提到的，IE8不支持audio，为了让它能用，可以使用embed。

它的一个毛病就是会自动播放，另一个毛病是你不给它设置width和height的话你根本看不清它（实际上我的edge可以，但是好像IE就很小，得给它设置大小），没法关掉音乐。

兼容

embed使得老版本能用了，但是在edge看的时候变得好丑，用上面提到的方法，写成下面的样子，就可以在edge用audio和source，在IE8用embed了。

video

video:向网页中引入视频文件

使用方法和audio基本相同，不详细说了，看代码。

效果：

都是本地文件？

一般我们不会往本地放音视频文件，因为这样本地服务器压力大，除非你有钱，去买服务器。

我们可以花钱去网上买服务，把视频放在它的服务器，我们引它的链接即可。 此外，我们可以把视频传到视频网站（腾讯视频、B站），然后把链接引过来也行。这里我就把举例，免得又被删了。

转载地址：https://blog.csdn.net/weixin_45034895/article/details/115918443 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！