前端学习笔记17-音视频播放

最新推荐文章于 2023-10-20 08:50:47 发布

小欣CZX

最新推荐文章于 2023-10-20 08:50:47 发布

阅读量228

点赞数 1

文章标签： html css

本文链接：https://blog.csdn.net/weixin_45034895/article/details/115918443

版权

小白前端学习专栏收录该内容

100 篇文章 7 订阅

订阅专栏

前端学习笔记17-音视频播放

标签audio
标签source
embed
兼容
video
都是本地文件？

标签audio

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内联框架</title>
</head>
<body>
    <audio src="./source/audio.mp3" controls autoplay loop></audio>
</body>
</html>

标签source

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内联框架</title>
</head>
<body>
    <audio controls>
    对不起，您的浏览器不支持播放音频！请升级浏览器！ 
        <source src="./source/audio.mp3">
        
    </audio>

</body>
</html>

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内联框架</title>
</head>
<body>
    <audio controls> 
        <source src="./source/audio.mp3">
        <source src="./source/audio.ogg">
    </audio>

</body>
</html>

embed

如视频里提到的，IE8不支持audio，为了让它能用，可以使用embed。
它的一个毛病就是会自动播放，另一个毛病是你不给它设置width和height的话你根本看不清它（实际上我的edge可以，但是好像IE就很小，得给它设置大小），没法关掉音乐。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内联框架</title>
</head>
<body>

    <embed src="./source/audio.mp3" type="audio/mp3" width="300" height="100">

</body>
</html>

兼容

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

    <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基本相同，不详细说了，看代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内联框架</title>
</head>
<body>
    <video controls>
        <source src="./source/flower.webm">
        <source src="./source/flower.mp4">
        <embed src="./source/flower.mp4" type="video/mp4">
    </video>
</body>
</html>

效果：
在这里插入图片描述

都是本地文件？

一般我们不会往本地放音视频文件，因为这样本地服务器压力大，除非你有钱，去买服务器。
我们可以花钱去网上买服务，把视频放在它的服务器，我们引它的链接即可。
此外，我们可以把视频传到视频网站（腾讯视频、B站），然后把链接引过来也行。这里我就把举例，免得又被删了。

小欣CZX

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
前端学习笔记17-音视频播放

前端学习笔记17-音视频播放标签audio标签sourceembed兼容video都是本地文件？标签audioaudio：向网页中引入一个外部音频文件音视频引入时，默认用户无法操作，得加controls属性。autoplay属性设置是否自动播放（但是这个属性好像有问题，在打开页面时它会自动播放，但是刷新后不大行（我用的edge好像可以），视频老师说是用户体验问题，我也不细讲了。）loop：是否循环播放<!DOCTYPE html><html lang="en">&lt
复制链接

扫一扫