用友iUAP马太航:HTML5多媒体特性分析

  目前在浏览器中播放音频和视频这些多媒体文件需要通过使用Adobe Flash这样的插件实现,而插件的使用会增加浏览器的启动时间、增加内存消耗、甚至会导致浏览器崩溃,而插件本身的稳定性也存在一定问题,特别是Flash,这个插件导致的诸多问题已经让它声名狼藉。Flash的普遍性是很有价值的,但软件的质量还有很多不尽如人意的地方。

  HTML5支持直接在浏览器中播放音频和视频文件,而不再需要使用插件,降低了多媒体网站开发难度的同时,又避免了因插件导致浏览器崩溃的问题。HTML5中的视频功能是通过标签来实现的,该标签包含了很多属性,通过preload属性设定视频的预加载,通过poster属性向用户呈现一张占位图,通过width和height属性设置视频尺寸,通过src和source属性设置视频来源等。Preload属性有3个值,none表示视频播放前不会载入(页面显示为一个空白视频播放器),metadata表示视频开始播放前只加载元素据(高度、宽度、第一帧等信息),auto表示页面打开后就下载视频(默认),这里需要注意的是metadata,尽管HTML5规定其只加载元数据,但在实际情况中发现有些浏览器会预先下载整个视频,这就会带来更多的流量消耗,通常解决方法是使用poster属性,用户首先将视频文件的第一帧做一张屏幕截图(包含视频控件,以提示用户这是一段视频文件),然后将该图片通过poster引入,如preload=”none” poster=”poster.png”,这样为用户提供了一个漂亮的视频预览页面的同时又节省了流量,这对移动端页面且视频播放率不高的情况尤为重要。最简单的表示视频来源的属性是src(同img标签),但是由于一定的历史性因素,浏览器支持的视频格式不尽相同,也没有哪一种格式能够适用于所有主流浏览器。因此用户必须以多种格式编码视频,然后使用source标签引入,浏览器会沿着列表顺序寻找它能够播放的视频文件,代码如下:

  HTML5还提供了丰富的DOM操作,来实现对视频文件的控制。Video元素由HTMLVideoElement对象所代表,通过类似于document.getElementById(html5-video)的代码即可获得HTMLVideoElement对象,该对象继承HTMLMediaElement,因此具有HTMLMediaElement对象的所有功能。可以通过HTMLVideoElement获取视频文件的基本信息,如autoplay(是否自动播放)、currentSrc(当前文件来源)、controls(是否加载媒体控件)、loop(是否循环播放)等等。当然,使用HTMLVideoElement对象也可以对媒体播放进行控制,主要有currentTIme(设置或返回媒体文件播放点)、duration(返回媒体文件总时长)、ended(判断媒体文件是否已播放完)、pause()(暂停)、pause(判断是否暂停)、play()(播放)等。通过灵活的使用HTMLVideoElement对象,将video标签的媒体控件隐藏,用户可以实现自己的定制化控件,包括暂停、播放、重播、快进/退后(一段时间)、分级快进/退后、截图、视频定位(按时间、按帧数定位)等等许多定制化功能。这里需要注意的有两点。一是视频截图,video标签本身并不支持视频截图功能,必须通过HTML5的canvas标签实现,类似代码如下:

  当调用getPicture()方法时,当前视频帧会被drawImage方法用来描绘画布,完成截图功能。二是帧的控制,video中并没有基于帧的控制,所有的控制都是基于时间(秒)的,因此想要完成如抽帧、按帧定位、查看上一帧/下一帧等功能就需要用户自己完成帧/秒间的换算。帧秒间换算用FPS(每秒传输帧数,Frames Per Second)实现,普通视频的fps为25,即每秒有25帧,普通手机拍摄的视频为30fps,高速摄像机拍摄的视频可能达到120fps,可以看出对于不同的视频源其fps是不同的,这也给基于帧的操作带来的不便性,更加遗憾的是HTML5中并没有提供能获取视频源FPS的属性或方法。完整实例代码如:

  HTML5由于video、audio(音频,操作类似没有图像的video,可以看成是video的子集)元素的引入确实给多媒体的应用带来的很大的便利性,但其仍处在发展的初期阶段,因此存在着浏览器适配、功能不完善(基于帧的控制)等功能。相信在HTML5不断发展完善后,这些问题都会一一解决,HTML对原生音视频的支持潜力是巨大的。

相关阅读