HTML5技术

HTML5中Video和Audio - 进击的小前端

字号+ 作者:H5之家 来源:H5之家 2016-12-01 10:00 我要评论( )

相关属性 src属性 该属性指定媒体数据的URL地址。 autoplay属性 在该属性中指定是否在页面加载后自动播放,使用方法: video src = "test.mov" autoplay /video preload属性 在该属性中指定视频或音频数据是否预加载。如果使用预加载的话,浏览器会预先将视

相关属性

src属性

该属性指定媒体数据的URL地址。

autoplay属性

在该属性中指定是否在页面加载后自动播放,使用方法:

  • <video src="test.mov" autoplay></video>
  • preload属性

    在该属性中指定视频或音频数据是否预加载。如果使用预加载的话,浏览器会预先将视频或音频进行缓冲,这样可
    以加快播放的速度,因为播放时数据已经预先缓冲完毕。

    该性情有三个可选值:none,metadata与auto,默认值为auto.

    该属性的使用方法

  • <video src="test.mov" preload="auto"></video>
  • poster (video元素独有属性)

    当视频的不可用时,可以使用该元素向用户展示一幅替代用的图片,使用方法:

  • <video src="test.mov" poster="CannotUse.jpg"></video>
  • loop属性

    在该属性中指定是否循环播放视频或音频,使用方法:

  • <video src="test.mov" autuplay loop></video>
  • controls属性

    该属性中指定是否为视频或音频添加浏览器自带的播放用的控制条。控制条中具有播放、暂停等按钮。

  • <video src="test.mov" controls></video>
  • 开发者也可以在脚本中自定义控制条,而不使用浏览器默认的控制条。

    with与height(video独有属性)

    在该属性中指定视频的宽度与高度(以像素为单位)使用方法:

  • <video src="test.mov" width="500" height="300"></video>
  • error属性

    在读取、使用媒体数据的过程中中,正常情况下,video元素或audio元素的error属性为null,但是任何时候只要出
    现错误,error属性将返回一个MediaError对象,该对象的code返回对应的错误状态,错误状态共有4个可能值,如
    下所示。

    读取错误状态的代码如下:

    networkState属性

    在媒体数据加载过程中可以使用networkState属性读取当前的网络状态,共有如下所示的4个可能值:

    读取错误状态的代码如下:

    currentSrc属性

    可以使用currentSrc属性来读取播放中媒体数据的URL地。
    currentSrc属性为只读属性。

    buffered属性

    可以使用video元素或audio元素的buffered属性来返回一个对象,该对象实现TimeRanges接口,以确认浏览器是否已缓存媒体数据。TimeRanges对象表示一段时间范围,在大多数情况下,TimeRanges对象表示的时间范围是一个单一的以0开始的范围,但是如果浏览器发出Range Requests请求,这时TimeRanges对象表示的时间范围是多个时间范围。

    TimeRanges对象对象具有一个length属性,表示有多少个时间范围,大多数情况下存在时间范围是,该值为1;不存在时间范围是,该值为0。TimeRanges对象还具体两个方法,TimeRanges.start(index)与TimeRanges.end(index),大多数情况下将index值设为0就可以了。当用videoElement.buffered语句来实现TimeRanges接口时,TimeRanges.start(0)表示当前缓存区内从媒体数据的什么时间开始进行缓存,TimeRanges.end(0)表示当前缓存区内的结束时间。

    readyState属性

    可以使用video元素或audio元素的readyState属性返回媒体当前播放位置的就绪状态,共有5个可能的值。

    readyState属性为只读属性。

    seeking属性与seekable属性

    可以使用video元素或audio元素的seeking属性返回一个布尔值,表示浏览器是否正在请求某一特定播放位置的数
    据,true表示浏览器正在请求数据,false表示浏览器已停止请求。

    可以使用video元素或audio元素的seekable属性来返回一个TimeRanges对象,该对象表示请求到的数据时间范围。

    当媒体为视频时,开始时间为请求到视频数据的第一帧的时间,结束时间为请求到视频数据的最后一帧的时间。

    seeking属性与seekable属性只读属性

    currentTime属性、startTime属性与duration属性

    可以使用video元素或audio元素的currentTime属性来读取媒体的当前播放位置,也可以通过修改currentTime性情
    为修改当前的播放位置。如果修改的位置上没有可用的媒体数据时,将抛出INVALID_STATE_ERR异常;如果修改的
    位置超出了浏览器在一次请求中可以请求的数据范围,将抛出INDEX_SIZE_ERR异常。

    可以使用video元素或audio元素的startTime属性来读取媒体播放的开始时间,通常为0。

    可以使用video元素或audio元素的dutation属性来读取媒体文件总的播放时间。

    三者的时间、单位均为秒,currentTime为可读与属性,其余两个均为只读属性。

    played属性、paused属性、ended属性

    可以使用video元素或audio元素的played属性来返回一个TimeRanges对象,该对象中可以读取媒体文件的已播放部份的时间段。开始时间为已播放部份的开始时间,结束时间为已播放部份的结束时间。

    可以使用video元素或audio元素的paused属性来返回一个布尔值检测是否处于暂停状态,true表示暂停播放,
    false表示正在播放。

    可以使用video元素或audio元素的end属性来返回一个布尔值检测是否播放完毕,true表示已播放完毕,false表示
    还未播放完毕。

    三者均为只读属性。

    defaultPlayRate属性与playbackRate属性

    defaultPlayRate属性读取或修改媒体的播放速率。

    playbackRate属性读取或修改媒体当前的播放速率。

    volume属性和muted属性

    volume属性读取或修改媒体的的播放音量,范围从0到1,0为表单,1为最大音量。

    muted属性读取或修改媒体的表单状态,该值为布尔值,true表示静音状态,false表示非静音状态。

     

    相关事件

     

    1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

    相关文章
    • Html5 布局方式 - 飞翔的月亮

      Html5 布局方式 - 飞翔的月亮

      2016-12-01 11:00

    • Html5 绘制旋转的太极图 - 飞翔的月亮

      Html5 绘制旋转的太极图 - 飞翔的月亮

      2016-11-30 17:00

    • Html5绘制时钟 - 飞翔的月亮

      Html5绘制时钟 - 飞翔的月亮

      2016-11-30 16:00

    • Html5 实现灯笼绘制 - 飞翔的月亮

      Html5 实现灯笼绘制 - 飞翔的月亮

      2016-11-30 15:00

    网友点评
    a