|
|
HTML5多媒体特性分析:马太航目前在浏览器中播放音频和视频这些多媒体文件需要通过使用Adobe?Flash这样的插件实现，而插件的使用会增
加浏览器的启动时间、增加内存消耗、甚至会导致浏览器崩溃，而插件本身的稳定性也存在一定问题，特别是Flash，这个插件导致的诸多问题
已经让它声名狼藉。Flash的普遍性是很有价值的，但软件的质量还有很多不尽如人意的地方。HTML5支持直接在浏览器中播放音频和视
频文件，而不再需要使用插件，降低了多媒体网站开发难度的同时，又避免了因插件导致浏览器崩溃的问题。HTML5中的视频功能是通过deo>标签来实现的，该标签包含了很多属性，通过preload属性设定视频的预加载，通过poster属性向用户呈现一张占位图，通过
width和height属性设置视频尺寸，通过src和source属性设置视频来源等。Preload属性有3个值，none表示视频
播放前不会载入（页面显示为一个空白视频播放器），metadata表示视频开始播放前只加载元素据（高度、宽度、第一帧等信息），aut
o表示页面打开后就下载视频（默认），这里需要注意的是metadata，尽管HTML5规定其只加载元数据，但在实际情况中发现有些浏览
器会预先下载整个视频，这就会带来更多的流量消耗，通常解决方法是使用poster属性，用户首先将视频文件的第一帧做一张屏幕截图（包含
视频控件，以提示用户这是一段视频文件），然后将该图片通过poster引入，如preload=”none”poster=”post
er.png”，这样为用户提供了一个漂亮的视频预览页面的同时又节省了流量，这对移动端页面且视频播放率不高的情况尤为重要。最简单的表
示视频来源的属性是src（同img标签），但是由于一定的历史性因素，浏览器支持的视频格式不尽相同，也没有哪一种格式能够适用于所有主
流浏览器。因此用户必须以多种格式编码视频，然后使用source标签引入，浏览器会沿着列表顺序寻找它能够播放的视频文件，代码如下：<
videowidth="500"height="380"controlsautoplay>deo.webm">="video.mp4">Videocannotbedisplayed浏览器重点支持的视
频格式格式支持WebMOpera、Chrome、FirefoxOgg/TheoraOpera、Chrome、FirefoxMP4/
H.264IE、Chrome、SafariHTML5还提供了丰富的DOM操作，来实现对视频文件的控制。Video元素由HTMLVi
deoElement对象所代表，通过类似于document.getElementById("html5-video")的代码即可获
得HTMLVideoElement对象，该对象继承HTMLMediaElement，因此具有HTMLMediaElement对象的
所有功能。可以通过HTMLVideoElement获取视频文件的基本信息，如autoplay（是否自动播放）、currentSrc
（当前文件来源）、controls（是否加载媒体控件）、loop（是否循环播放）等等。当然，使用HTMLVideoElement对
象也可以对媒体播放进行控制，主要有currentTIme（设置或返回媒体文件播放点）、duration（返回媒体文件总时长）、en
ded（判断媒体文件是否已播放完）、pause()（暂停）、pause（判断是否暂停）、play()（播放）等。通过灵活的使用HT
MLVideoElement对象，将video标签的媒体控件隐藏，用户可以实现自己的定制化控件，包括暂停、播放、重播、快进/退后（
一段时间）、分级快进/退后、截图、视频定位（按时间、按帧数定位）等等许多定制化功能。这里需要注意的有两点。一是视频截图，video
标签本身并不支持视频截图功能，必须通过HTML5的canvas标签实现，类似代码如下："width="500"height="380"controlsautoplay>mp4"type=''video/mp4''>"500"height="380">varvi
deo=document.getElementById("html5-video");varctx=document.g
etElementById("canvas").getContext("2d");functiongetPicture(){v
ideo.pause();ctx.drawImage(video,0,50,500,280);}当调用
getPicture()方法时，当前视频帧会被drawImage方法用来描绘画布，完成截图功能。二是帧的控制，video中并没有基
于帧的控制，所有的控制都是基于时间（秒）的，因此想要完成如抽帧、按帧定位、查看上一帧/下一帧等功能就需要用户自己完成帧/秒间的换算
。帧秒间换算用FPS（每秒传输帧数，FramesPerSecond）实现，普通视频的fps为25，即每秒有25帧，普通手机拍摄
的视频为30fps，高速摄像机拍摄的视频可能达到120fps，可以看出对于不同的视频源其fps是不同的，这也给基于帧的操作带来的不
便性，更加遗憾的是HTML5中并没有提供能获取视频源FPS的属性或方法。完整实例代码如：arset="UTF-8">html5——videoype="button"value="播放"onclick="doPlay()">value="停止?"onclick="doStop()">onclick="doTimeCode()">"getPicture()">"value="按时间定位"onclick="doLocation()">en"><
/div>-video"width="500"height="380"controlsautoplay>video.mp4"type=''video/mp4''> "canvas"width="500"height="380">
varvideo=document.getElement
ById("html5-video");varinfo=document.getElementById("info");
varctx=document.getElementById("canvas").getContext("2d");vi
deo.addEventListener("loadedmetadata",function(){info.innerHTM
L+="视屏分辨率："+video.videoWidth+""+video.videoHeight+"
";});functiondoPlay(){video.play();}functiondoStop(){v
ideo.pause();}functiondoTimeCode(){video.pause();info.innerH
TML+="当前时间："+video["currentTime"]+" "}functiongetP
icture(){video.pause();ctx.drawImage(video,0,50,500,280);}
//按时间定位functiondoLocation(){doStop();varvalue=document.ge
tElementById("time").value;video.currentTime=value;//alert(vide
o.currentTime);setTimeout(function(){},1000);ctx.drawImage(vide
o,0,110,500,280);}//按帧定位，一秒25帧functiondoLocation1(){doSt
op();varvalue=document.getElementById("zhen").value;video.cu
rrentTime=value/25.0;ctx.drawImage(video,0,110,500,280);} | | |
