音视频标签详解-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_43648337/article/details/108305665

audio标签

用来向页面中引入一个音频文件，音视频文件引入时默认情况下不允许用户控制播放停止等。
属性：
src：指定音频文件的路径
controls：无值属性，有则表示允许用户控制；无则表示用户不能控制。若设置了可以控制，则会显示一个播放器，但这个播放器在不同浏览器中显示效果不同，需用CSS和JS修改后使其在所有浏览器中显示效果相同。
autoplay：无值属性，音频文件是否自动播放，如果设置了autoplay则在页面打开时会自动播放，但目前大部分浏览器都不会对音频进行播放
loop：无值属性，是否循环播放
注：若只引入音频文件，不设置属性，此时即使引入了音频文件也听不到声音。
除了通过src属性指定音频文件，也可使用source标签指定音频文件的路径。有些浏览器不支持audio标签，则需给予用户反馈，使用第二种方法可以添加文字进行反馈。同时，有的浏览器支持不同的音频格式，使用source可以添加多个不同格式的音频文件路径，增加兼容性。（但只会顺序选择第一个可播放音频进行播放）
老版本浏览器不支持audio的情况下，可以使用embed标签，可引入音频或视频。使用embed标签会自动播放，需指定播放器大小，否则有时会显示不正常。若使用站内资源，还需设置type属性的值，音频：audio/音频格式，视频：video/视频格式。使用embed标签和文字提示两者选其一。

video标签

向页面中引入视频文件，使用方法和audio基本一样。属性也相同。
但实际开发中，很少引入本地的音视频，本地音视频占用较大存储空间，对服务器造成压力，成本较高，用户观看缓冲慢等问题。所以大多引入站外资源，例如把音视频存到专门存放音视频的服务器中，或把音视频传到视频网站中，再使用iframe引入。目前存储音视频有视频点播和对象存储两种方式。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <audio src="音频路径" controls autoplay></audio>
    <audio controls>
        对不起，您的浏览器不支持播放音频，请升级浏览器！
        <source src="音频.mp3">
        <source src="音频.ogg">
        <embed src="音视频.mp3" type="audio/mp3" width="宽度" height="高度">
    </audio>
    <video controls>
        <source src="视频.mp4">
        <source src="视频.webm">
        <embed src="视频.mp4" type="video/mp4">
    </video>
    <iframe src="视频网址" frameborder="0"></iframe>
</body>
</html>