HTML5多媒体

来源:互联网 发布:三星手机 数据恢复 编辑:程序博客网 时间:2024/06/05 11:56

视频处理

video元素:

<video id="media" width="300" controls>    <source src="xxx.mp4"/>    <source src="xxx.ogg"/></vodeo>

controls属性:视频控件按钮

<video id="media" controls>    <source src="video/video001.mp4"/></video>
  • autoplay:加载后自动播放
  • loop:循环播放
  • poster:在视频等待播放时显示一幅画像
  • preload:可以设置三个值(none:不缓存视频,metadata:推荐浏览器抓取一些资源信息,auto:默认值,要求浏览器尽可能快地下载视频)

编程实现视频播放

事件:

  • progress:更新媒体的下载速度,会周期性地触发
  • conplaythrough:顺利播放时会触发
  • canplay:不考虑整体状态,只要下载了一定的可放帧会触发这个事件
  • ended:媒体到达末尾时触发
  • pause:暂停时触发
  • play:开始播放时触发
  • error:媒体播放出现错误时触发

方法:

  • play():播放
  • pause():暂停
  • load():加载媒体文件
  • CanPlayType(type):查看浏览器

属性:

  • paused:暂停或未播放为true
  • ended:已经结束为true
  • duration:返回媒体时长,以秒为单位
  • currentTime:获取或设置媒体播放位置

音频处理

audio属性:
src,controls,autoplay,loop,preload
其实属性与video相同,事件与方法也一样,只是标签不一样。

原创粉丝点击