发展是一辈子的事儿！大家好！我是时问新。分享前端、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>，相识即可。谢谢阅读！知识总结不易，请点个赞或转发勉励一下呗！想系统性学习前端的可以关注我！。
本文关键词：威尼斯官方网址下载,HTML5,音频,和,视频,威尼斯,网址,下载,发展,是
本文来源：威尼斯官方网址下载-www.sdjingmai.com
