HTML5网站建设如何加载媒体流

发布时间:2014-11-19 0:48:03

HTML5网站建设如何加载媒体流

  这段简短的范例可以在这里找到源代码:
  看上去很简单,但实际上加载媒体流的过程相当复杂。规范为此划分出了两种状态:
  网络状态(networkstate)及就绪状态(readystate),它们可以通过HTMLMediaElement接口获取,拥有两个只读属性,使用几个常量来描述相应状态。
  networkState属性用于监控网络状态,它可以在任何时间被查询,并反馈可能的值,见表。
  有两种方法来指定合适的源:通过相关元素的src属性,或使用source元素列出数个源让浏览器自行挑选。如果采用第二种方法,那么我们要怎样指定浏览器挑选了哪个源呢?答案其实就在只读属性video.currentSrc中。在视频播放器截图中,它显示在底部左边,版权信息前面。
  在浏览器在挑选源元素时,可以得知相应它是否支持相应媒体类型;使用脚本其实也可以,办法是使用canPlayType(type),提交一个相应的媒体类型参数给浏览器。浏览器反馈可能是明确表示能够播放、也可能是无法确定,或是因为不支持该类型而将其视为一个空字符串‘’。
  freadyState属性描述了媒体元素的当前状态,宁波网站建设认为可能的值见表。
  若在加载或播放过程中发生错误,将引发(译者注:术语为fire,引燃)error事件,并将可能的错误原因传递给code属性:
  video.addEventListener("error",function(e){alert(e.code);},false);此回调函数功能通过exode返回一个错误代码,其可能的值见表。
  HTMLMediaElement之旅已接近终点,还没涉及到的属性包括:
  两个布尔值属性,用于判断浏览器当前是否在搜索其他数据(seeking),或媒体流是否已经到达终点(ended);提供媒体流开始时间信息(initialTimeh当前时间轴相对于日期对象的偏移量(startOffsetTime)*TimeRanges接口的3个属性-buffered、played及seekable。
  TimeRanges的基本用途跟名字一样,用于记录时间段:
  interfaceTimeRanges{
  readonlyattributeunsignedlonglength;floatstart(inunsignedlon^index);floatend(inunsignedlongindex);};让我们用played来作示范以了解其运行机制:若我们在播放BigBuckBurmy视频的过程中单击暂停(pause),我们将得到第一个时间段,由一个开始时间及一个结束时间组成。相关属性为played.start(O)及played.end(O),同时在played.length中会存在一个已有的时间段数量的值一-目前为丨。之后我们跳到第8节,继续播放一小会,我们就通过played.start(l)与played,end(l)创建了第二个时间段,而played.length值也变为2。若两个时间段有重叠,它们将被合并。所有时间段都会在TimeRanges对象中被排序。
  通过这一方法我们可以追踪到媒体流的哪个区块被缓冲、被播放或被标记为可搜索的。这里有一个在线示例演示了BigBuckBuxmy视频的播放过程,可以有助于我们更直观的了解TimeRanges,请访问:http://html5.komplett.cc/code/chap_video/js_timeRanges.html媒体事件列表媒体流加载以及在特定位置播放会触发的事件很多,不过基本上都与HTMLMediaElement接口的3个主要状态有关。
  网络状态下(networkstate)的事件包括开始加载(loadstart)、执行(progress)、挂起(suspend)、取消(abort)、出错(error)、超时(emptied)及失速(stalled),它们的名字已经能直观反映出它们对应的网络状态,在就绪状态下(readystate)出现的事件包括已加载元数据(loadedmetadata)、已加载数据(loadeddata)、等待(waiting)、播放中(playing)、可播放(canplay)及可持续播放(canplaythrough),它们全部与当前或未来播放位置中的数据是否可用直接相关在播放状态下(playbackstate)有播放(play)、暂停(pause)、更新时间(timeupdate)、已结束(ended)、速度改变(ratechange)及媒体时长改变(durationchange),也同样顾名思义。我们最后要介绍的元素也是如此——音量改变(volumechange)。
  何时以及如何利用事件全取决于脚本如何设计。在我们的播放器中,需要用到的只是oncanplay与ontimeupdate,但如果想要进一步优化细节,就必须用到许多其他元素。
  如果你想要详细了解这诸多事件,规范中的Eventsummary将给你提供很大的帮助,其中不但包括了每个事件的说明,同时还解说了它们会在何种情况下被引发。请访问:http://www.w3.Org/TR/html5/video.htmlmmediaevents。
  如果你想要通过直观的了解这些媒体事件如何运作,还可以访问W3C网站上由PhilippeLeH竑aret制作的HTML5测试页面——主要针对视频、媒体时间以及媒体性能,地址是http://www.w3.org/25/video/mediaevents_html。
  本文由乐华网络编辑,转载请注明出处
  宁波网站建设www.leseo.net
上一篇:
意图优化还可以晓得跳离率(BounceRate)与脱离率(ExitRate),如所示。当页面跳离率逾
下一篇:
用户运用Yahoo!搜索后,Yahoo!运用的是字串办法来记载点击的去向。宁波seo认为只需有用时刻
关于乐华
乐华介绍
乐华思维
人才招聘
使用条款
隐私保护
RSS订阅
网站地图
新闻动态
乐华观点
行业动态
频道介绍
服务介绍
案例展示
品牌研究
品牌理论
品牌体系
联系我们
400-680-2900
社会媒体
微信公众平台
微信公众平台