成长是一辈子的事儿！大家好！我是时问新。分享前端、Python等技术，以及个人成长路上的那些事儿。
在过去好多年时间里，要在网页上看视频和玩游戏，默认是在浏览器上安装了FlashPlayer插件，才能进行。
而今，Flash技术已经彻底被封杀淘汰了，用HTML5技术就可以轻松的在网页上插入音频和视频。现在，全世界所有的网站使用Flash技术的不到3%，几乎都是HTML5的天下了。
Adobe公司(就是设计和开发了ps、pr等等等等一系列专业的图像、视频处理软件的公司，Flash也是该公司设计和开发的)于年已经宣布，将在年底停止支持Flash。
实际上，大概在年万维网联盟完成制定HTML5的标准之后，Flash就走向穷途末路了，而HTML5则所向披靡。而乔布斯更是极其讨厌Flash，所以苹果手机自始至终都基本不支持Flash。
小游戏网站上，曾经都是用Flash技术开发的小游戏，现在也充斥着各类用HTML5技术开发的小游戏。
Flash的问题在于不开放、不高效、不老实、不安全。早在年时，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这个网页中代码这样写：
!DOCTYPEhtmlhtmllang=enheadmetacharset=UTF-8metaname=viewportcontent=width=device-width,initial-scale=1.0titleDocument/title/headbodyaudiosrc=music/卢冠廷-一生所爱.mp3controls请升级你的浏览器！/audio/body/html
注意：如果你在audio标签上不写controls，在浏览器中是什么都看不到的。当你写了controls，浏览器中才会显示音频播放控件，效果如下：
点击最左边的黑色三角，可以播放和暂停音乐，拖动蓝色圆点，可以前进或后退进度条，拖动黑色小喇叭后面的蓝色圆点，可以放大或缩小声音。点击最右边黑色向下的箭头还可以下载。
autoplay属性
如果在audio标签上添加了autoplay属性，音频就会自动播放。
autoplay属性没有值。
常用的浏览器为了不打扰用户，可能不允许自动播放音乐，必须让用户手动点击之后才能播放。
所以呢，尽量不要给audio标签添加autoplay属性。
loop属性
在audio标签上声明loop属性，就会循环播放音频。
loop属性也没有值。
如果你想让音频自动播放以及循环播放，就可以在audio标签上写这两个属性：
!DOCTYPEhtmlhtmllang=enheadmetacharset=UTF-8metaname=viewportcontent=width=device-width,initial-scale=1.0titleDocument/title/headbodyaudiosrc=music/卢冠廷-一生所爱.mp3controlsautoplayloop请升级你的浏览器！/audio/body/html
视频
插入视频和插入音频非常相似。
在网页上插入视频需要使用video标签，video这个英文单词就表示视频。
video标签也是兼容到ie9。
video标签的属性和audio标签的属性是完全相同的。
video标签和audio标签的写法和用法也基本相同，就再不多说。
常用视频格式
浏览器中常用的视频格式有mp4、ogv、webm、avi等。
我已提前在项目文件夹中创建了一个插入视频.html的网页，并且创建了一个叫video的文件夹，里面提前存放了一个叫森林氧吧.mp4的视频文件。
在插入视频.html中写如下的代码：
!DOCTYPEhtmlhtmllang=enheadmetacharset=UTF-8metaname=viewportcontent=width=device-width,initial-scale=1.0titleDocument/title/headbodyvideosrc=video/森林氧吧.mp4controls请升级你的浏览器！/video/body/html
在浏览器中效果如下：
在视频下方可以看到播放按钮、进度条、音量控制、全屏播放、以及下载按钮的视频控件。
注意：当你不给video标签添加controls属性时，视频下方就不会显示这些控件。
我这里代码中video标签上没写autoplay和loop属性，当然你也可以加上看看效果，其实跟audio标签的效果一样，会自动播放和循环播放。
当然，video标签上还可以添加width属性，用来控制视频窗口的宽高大小。
!DOCTYPEhtmlhtmllang=enheadmetacharset=UTF-8metaname=viewportcontent=width=device-width,initial-scale=1.0titleDocument/title/headbodyvideosrc=video/森林氧吧.mp4controlswidth=请升级你的浏览器！/video/body/html
浏览器中效果如下：
audio和video标签拓展
关于audio和video标签的拓展知识，作为了解即可。
audio和video标签拓展拥有子标签source
source标签允许你规定多种格式的音频和视频文件，供浏览器选择自己支持的媒体文件类型进行播放。
示例代码：
以上代码，浏览器需要选择它能够支持的文件类型进行播放，如果都支持则任选一个(一般情况下会选第一个)。
温馨提示：
关于音频和视频支持的文件格式，除以上常用格式，随着技术的变更，可能还有其他格式，了解即可，不需要深入研究原理。
还有audio和video标签的子标签source，了解即可。
感谢阅读！知识总结不易，请点个赞或转发鼓励一下呗！想系统性学习前端的可以
联系电话：