您的位置:主页 > 新闻中心 > 行业资讯 >

20 HTML5音频和视频

行业资讯 / 2021-05-28 00:37

本文摘要:发展是一辈子的事儿!大家好!我是时问新。分享前端、Python等技术,以及小我私家发展路上的那些事儿。在已往很多多少年时间里,要在网页上看视频和玩游戏,默认是在浏览器上安装了Flash Player插件,才气举行。 现在,Flash技术已经彻底被封杀淘汰了,用HTML5技术就可以轻松的在网页上插入音频和视频。现在,全世界所有的网站使用Flash技术的不到3%,险些都是HTML5的天下了。

yabo亚搏网页版

发展是一辈子的事儿!大家好!我是时问新。分享前端、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属性,音频就会自动播放。

yabo亚搏网页版

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,音频,和,视频,发展,是,一辈子,的,事儿,yabo亚搏网页版

本文来源:yabo亚搏网页版-www.alegriaeboadisposicao.com