今天给大家分享一下html5中的视频（video）和音频（audio）。在进入正题之前，我们先来了解一下Flash和html5这两种技术的产生背景和发展历史。1.前言Flash退役，html5上层。这项技术诞生于20多年前，已经在98%的个人电脑上使用。它是最受开发人员欢迎的软件之一，用于开发游戏和视频播放器。以及在多个Web浏览器上运行的应用程序。法尔什的前半生可以说是辉煌的。在Flash的鼎盛时期，据Adobe官方统计，全球有近200万的Flash开发者。但它只是满足了人们的短期需求，并没有预见到移动设备的革命。现在业界普遍认为，Flash的下坡路是从与苹果决裂开始的。特别是2010年乔布斯发表的一篇《thoughts-on-flash》文章，乔布斯在文中写下了自己对Flash的看法，解释了自己不用Flash的原因，并谈到了Flash的一些问题，比如开放性、安全性、对设备电池的影响等生活，不利于触摸屏等等。从那以后，这项技术的流行度有所下降，HTML5等其他技术逐渐取代了Flash。在当今最流行的网络浏览器Chrome上，Flash的使用率急剧下降。据谷歌称，2014年80%的桌面用户每天都使用Flash播放器，而今天这一比例仅为17%。终于在2017年7月25日，Adobe之父也放弃了治疗，宣布flash将于2020年正式退役。HTML5是HTML的最新版本，扩展了可嵌入网页的多媒体元素列表。HTML5支持使用CANVAS元素、级联样式表(CSS)和用于音频和视频的Java的多媒体特定标签、动画和交互性的可缩放矢量图形(SVG)。HTML5消除了对第三方附加组件（如插件和API）的需求，以便通过在文档文本本身中嵌入代码来运行内容。这解决了在以前的迭代中发现的兼容性问题，其中需要第三方插件或专有API才能正确呈现HTML文档。作为一种现在可以支持类Flash技术的开源语言，HTML5已经成为Web开发新的首选。所谓长江后浪推前浪，一代比一代。HTML5可以说是站在了Flash这个巨人的肩膀上。Flash给html5留下了很多的遗产，尤其是很多HTML5相关的视频和音频项目，在过去的几年里集成了大量的Flash相关的媒体库，提供更多的功能支持，以及大量的HTML5视频今天的玩家是由原来的闪电侠领域改造而来的。这一切都是Flash技术给今天的HTML5领域带来的财富。在拥抱新技术的同时，也感谢flash对互联网的深远影响。废话不多说，一起进入正题。2.Audioandvideo2.1标签标签主要有2.2不管是音频文件还是视频文件，video容器其实只是一个容器文件。点类似于压缩一组文件的ZIP文件。视频文件（视频容器）包含音轨、视频轨和一些其他元数据。播放视频时，音轨和视频轨绑定在一起。元数据部分包含视频的封面、标题、副标题、副标题等相关信息。主流视频容器支持的格式包括：.avi、.flv、.mp4、.ogv等。2.3Codec音视频编解码器是一种算法，可以对特定格式的音视频文件进行编码和解码，使其能够在浏览器中快速加载和解析。大大减少了用户的等待时间，提升了用户体验。常见的音频编解码器包括AAC、MPEG-3、OggVorbis，视频编解码器包括H.264、VP8、OggTheora。2.4Media元素video/audio标签属性包括：autoplay：控制是否自动播放；controls：控制是否显示播放控件；loop：媒体是否循环播放；muted：规定视频输出应该静音；preload：页面加载时加载，并准备播放；src：要加载的资源文件。其中，video还有几个特殊的标签属性poster：视频播放前的预览图；width、height：设置视频的大小；videoWidth、videoHeight：视频的实际大小（只读）。2.5js中的音视频(1)创建varov=document.createElment('video')//直接new一个对象，参数为src。varoa=newAudio('http://www.baidu.com/test.mp3')(2)获取和常规dom节点获取没有区别。(3)属性和方法(4)事件2.6浏览器支持从下表可以看出浏览器对媒体元素的支持情况。音频Firefox：支持OggVorbis和WAV Opera：支持OggVorbis和WAV Safari：支持MP3、AAC和MP4 Chrome：支持OggVorbis、MP3、WAV、AAC和MP4 互联网Explorer9+：支持MP3、AAC、MP4 IOS：支持MP3、AAC、MP4Android：支持AAC、MP3videoFirefox：支持OggTheora格式和WEBMOpera：支持OggTheora格式，WEBMSafari：支持MP4Chrome：支持OggTheora格式，MP4和WEBMInternetExplorer9：支持MP4和WEBM（需要安装插件）IOS：支持MP4Android：支持MP4和WEBM（Android2.3及以上）为了最大程度的支持上述所有浏览器，它建议开发者使用OggVorbis和MP3作为音频格式，使用WEBM和MP4作为视频文件格式，并在source标签中加载资源。例如：<音频自动播放控件><视频自动播放控件>与直接在video或audio标签中写src相比，使用source标签加载资源的好处在于，当浏览当转换器无法解析第一种视频或音频格式时，它会解析第二种格式，并且可以加载多个源。3.demo介绍了这么多，最后分享一下我通过媒体元素的一些属性和方法制作的一个自定义多媒体播放器，代码地址：自定义Binbin播放器，代码地址：自定义播放器源码。------------------------------------------我是分界线--------------------------最后，青创公司官网已经上线了，有兴趣的朋友请看一下。官网地址：www.eoitek.com
