成长是一辈子的事！大家好！我该问新的了。与前端、python等技术共享个人成长之路。

在过去好多年时间里，要在网页上看视频和玩游戏，默认是在浏览器上安装了Flash Player插件，才能进行。

而今，Flash技术已经彻底被封杀淘汰了，用html5技术就可以轻松的在网页上插入音频和视频。现在，全世界所有的网站使用Flash技术的不到3%，几乎都是HTML5的天下了。

Adobe公司(就是设计和开发了ps、pr等等等等一系列专业的图像、视频处理软件的公司，Flash也是该公司设计和开发的)于2017年已经宣布，将在2020年底停止支持Flash。

实际上，大概在2014年万维网联盟完成制定HTML5的标准之后，Flash就走向穷途末路了，而HTML5则所向披靡。而乔布斯更是极其讨厌Flash，所以苹果手机自始至终都基本不支持Flash。

小游戏网站4399上，曾经都是用Flash技术开发的小游戏，现在也充斥着各类用HTML5技术开发的小游戏。

Flash的问题在于不开放、不高效、不老实、不安全。早在2015年时，Flash的漏洞数量，高居所有软件的榜首。无数的勒索病毒，都是通过Flash传播的 。如果你的浏览器安装了Flash插件，各类广告弹窗将会在你的电脑上狂轰滥炸。而且Flash还会增加耗电，吞噬系统资源，看个视频，可能就会把你的浏览器整崩溃掉。

虽然HTML5技术也不完美，也有各类问题，但是HTML5是开放的，得到了微软、谷歌、苹果等各大公司的欢迎和支持。

话不多说，继续HTML5的征程。

音频

在网页上插入音频需要使用<audio>标签，audio这个英文单词就表示音频。

<audio>标签兼容到ie9，也就是说，ie8以及以下版本的浏览器不支持这个标签。

用以下代码就可以在浏览器插入一个音频：

<audio>标签上，要写上controls这个属性，它没有值，只要你写上这个单词，就表示显示播放控件。还要写src属性，src属性的值是要播放的音频的地址。

在<audio>标签对中间的文字，就是如果用户使用的浏览器版本比较低，不兼容<audio>标签时，那么将显示这些文字给用户看。也就是说，如果用户的浏览器很高级，肯定是支持<audio>标签的，它就不会显示这些文字，而只是显示音频的功能。而如果用户的浏览器比较低级，就会显示这些文字给用户看。

常用音频格式

浏览器常用的音频格式是mp3、wav、ogg格式，mp3更常用。

接下来我在项目文件夹添加一个music文件夹，里面存放一个mp3格式的文件，再创建一个"插入音频.html"的网页。

然后在"插入音频.html"这个网页中代码这样写：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<audio src="music/卢冠廷-一生所爱.mp3" controls>
请升级你的浏览器！
</audio>
</body>
</html>

注意：如果你在<audio>标签上不写controls，在浏览器中是什么都看不到的。当你写了controls，浏览器中才会显示音频播放控件，效果如下：

点击最左边的黑色三角，可以播放和暂停音乐，拖动蓝色圆点，可以前进或后退进度条，拖动黑色小喇叭后面的蓝色圆点，可以放大或缩小声音。点击最右边黑色向下的箭头还可以下载。

autoplay属性

如果在<audio>标签上添加了autoplay属性，音频就会自动播放。

autoplay属性没有值。

常用的浏览器为了不打扰用户，可能不允许自动播放音乐，必须让用户手动点击之后才能播放。

所以呢，尽量不要给<audio>标签添加autoplay属性。

loop属性

在<audio>标签上声明loop属性，就会循环播放音频。

loop属性也没有值。

如果你想让音频自动播放以及循环播放，就可以在<audio>标签上写这两个属性：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<audio src="music/卢冠廷-一生所爱.mp3" controls autoplay loop>
请升级你的浏览器！
</audio>
</body>
</html>

视频

插入视频和插入音频非常相似。

在网页上插入视频需要使用<video>标签，video这个英文单词就表示视频。

<video>标签也是兼容到ie9。

<video>标签的属性和<audio>标签的属性是完全相同的。

<video>标签和<audio>标签的写法和用法也基本相同，就再不多说。

常用视频格式

浏览器中常用的视频格式有mp4、ogv、webm、avi等。

我已提前在项目文件夹中创建了一个"插入视频.html"的网页，并且创建了一个叫video的文件夹，里面提前存放了一个叫"森林氧吧.mp4"的视频文件。

在"插入视频.html"中写如下的代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<video src="video/森林氧吧.mp4" controls>
请升级你的浏览器！
</video>
</body>
</html>

在浏览器中效果如下：

​

在视频下方可以看到播放按钮、进度条、音量控制、全屏播放、以及下载按钮的视频控件。

注意：当你不给<video>标签添加controls属性时，视频下方就不会显示这些控件。

我这里代码中<video>标签上没写autoplay和loop属性，当然你也可以加上看看效果，其实跟<audio>标签的效果一样，会自动播放和循环播放。

当然，<video>标签上还可以添加width属性，用来控制视频窗口的宽高大小。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<video src="video/森林氧吧.mp4" controls width="200">
请升级你的浏览器！
</video>
</body>
</html>

浏览器中效果如下：

<audio>和<video>标签拓展

关于<audio>和<video>标签的拓展知识，作为了解即可。

<audio>和<video>标签拓展拥有子标签<source>

<source>标签允许你规定多种格式的音频和视频文件，供浏览器选择自己支持的媒体文件类型进行播放。

示例代码：

以上代码，浏览器需要选择它能够支持的文件类型进行播放，如果都支持则任选一个(一般情况下会选第一个)。

温馨提示：

关于音频和视频支持的文件格式，除以上常用格式，随着技术的变更，可能还有其他格式，了解即可，不需要深入研究原理。

还有<audio>和<video>标签的子标签<source>，了解即可。

感谢阅读！知识总结不易，请点个赞或转发鼓励一下呗！想系统性学习前端的可以关注我！

1.《ie9崩溃专题之20 HTML5音频和视频》援引自互联网，旨在传递更多网络信息知识，仅代表作者本人观点，与本网站无关，侵删请联系页脚下方联系方式。

2.《ie9崩溃专题之20 HTML5音频和视频》仅供读者参考，本网站未对该内容进行证实，对其原创性、真实性、完整性、及时性不作任何保证。

3.文章转载时请保留本站内容来源地址，https://www.cxvn.com/gl/djyxgl/195248.html