文档章节

html5之video(audio)api

bosscheng
 bosscheng
发布于 2014/11/10 15:46
字数 837
阅读 161
收藏 1

背景

在html4时代实现播放音频和视频的方法

<object classid="clsid:xxxxxx" width="500" height="900" codebase="">
    <parem name="" value="">
    <embed type="" width="" height="" src="" allowscriptaccess="" allowfullscreen=""></embed>
</object>

在html5时代实现的方案

##video
<video>
    <source src="" type="" codecs=""></source>    
</video>


##audio
<audio src="">
    你的浏览器不支持audio元素
</audio>

公共属性

  • src:指定媒体数据的src

  • autoplay: 是否在页面加载完毕之后自动播放

  • preload:none/metadata/auto :表示是否进行预加载

  • none: 表示不进行预加载

  • metadata:表示只预加载媒体的元数据

  • auto:使用方法 preload="auto"

  • loop:重复播放

  • controls:是否为视频和音频添加浏览器自带的播放用的控制条。

  • error:在发生错误的时候,会返回一个MediaError对象,该对象的code返回对应的错误状态

  • networkStatus:数据加载过程中读取当前网络状态。

  • currentSrc: 读取播放器中的媒体数据的url地址(只读)

  • buffered: 

  • readyStatus: 返回媒体当前播放位置的就绪状态

  • seeking: 表示是否正在请求某一特定播放位置的数据,true/false 

  • seekable: 返回一个TimeRanges对象,表示请求到的数据的时间范围

  • currentTime:获取到媒体当前播放位置。

  • startTime: 读取媒体播放的开始位置

  • duration:读取媒体总的播放时间

  • played:返回一个TimeRanges对象,读取媒体已经播放部分的时间段

  • paused:返回一个布尔值,表示是否处于暂停状态 true/false

  • ended: 返回一个布尔值,表示是否已经播放完毕 true/false

  • defaultPlaybackRange:获取和修改媒体默认的播放速度

  • playbackRange: 读取和修改媒体当前的播放速度

  • volume:读取和修改媒体的播放音量

  • muted: 修改和读取媒体的禁音状态


私有属性

video

  • poster:当视频不可用的时候,可用使用一个图片替代它。

  • width:宽度

  • height:高度

公共方法

  • play  播放媒体, 自动将元素的paused属性变为false

  • pause   暂停媒体, 自动将元素的paused属性变为true

  • load     使用这个方法重新载入媒体进行播放。自动将元素的playbackRate属性值变为defalutPlaybackRate的值,自动将error的值变为null

  • canPlayType: 测试浏览器是否支持指定的媒体类型 /""/maybe/probably


事件介绍

loadstart:  开始网上查找媒体数据

progerss  正在获取媒体数据

suspend   浏览器暂停获取数据,但是下载过程并没有结束

abort   停止下载媒体数据

error 出错误

emptied 突然变为未初始化状态。

stalled  浏览器尝试获取媒体数据失败

play 即将开始播放

pause 播放暂停

loadedmetadata 浏览器获取完毕媒体的时间长和字节数

waiting 播放过程由于得不到下一帧而暂停,但很快就能获取到下一帧

playing 正在播放

canplay 浏览器能够播放媒体

seeking seeking为true 表示正在获取媒体

seeked seeking变为false,浏览器停止请求数据

timeupdate 当前播放位置发生改变

ended 播放结束后停止播放

ratechange defaultplaybackRate属性或者playbackRate属性被改变。

durationchange 播放时长被改变

volumechange volume属性被改变或者 muted属性被改变的时候触发



© 著作权归作者所有

bosscheng
粉丝 81
博文 303
码字总数 95443
作品 0
南京
前端工程师
私信 提问
移动Web应用程序开发 HTML5篇 (四) 多媒体API

介绍 本系列博客将主要介绍如今大红大紫的移动Web应用程序开发最重要的三个工具:HTML5,JavaScript, CSS3。 本篇是HTML5介绍的第四篇,主要介绍HTML5的多媒体API。 相关文章: 移动Web应用...

红薯
2012/02/27
1K
0
HTML5 面试中最常问到的 10 个问题

1. HTML5 新的 DocType 和 Charset 是什么? HTML5 现在已经不是 SGML 的子集,DocType 简化为: HTML 5 指定 UTF-8 编码的方式如下: 2. 如何在 HTML5 页面中嵌入音频? HTML 5 包含嵌入音频...

oschina
2013/10/11
12.1K
17
好程序员前端分享HTML5 发展史

  好程序员前端分享HTML5发展史,HTML5草案的前身名为WebApplications1.0,于2004年被WHATWG提出,于2007年被W3C接纳,并成立了新的HTML工作团队。   HTML5的第一份正式草案已于2008年1...

好程序员IT
05/05
0
0
HTML5 Video/Canvas拍照初级

通过HTML5 Video和Canvas实现拍照的功能,功能很简单;另外,因为用到了getUserMedia()函数,目前只能在Chrome和Opera里使用,详见:Can I use getUserMedia/Stream API? 演示地址:HTML5 W...

Xiaopeng
2012/10/30
0
1
好程序员技术分享html5和JavaScript的区别

好程序员技术分享html5和JavaScript的区别,HTML5广义上讲是前端开发学科的代名词,包含HTML5、CSS3及JavaScript三个重要的部分,是运行在浏览器上应用的统称。如PC端网站、管理系统、手机网...

好程序员IT
04/26
0
0

没有更多内容

加载失败,请刷新页面

加载更多

任正非对华为热点问题的回应亮了,终于知道华为为什么能扛过这一次的冲击!

任正非对华为热点问题的回应亮了,终于知道华为为什么能扛过这一次的冲击! 如果你是华为的老板,看到一条传遍网络的“美国封锁华为”、“华为禁令”的消息,你会怎么办? 昨天上午,华为创始...

forespider
48分钟前
2
0
Java HTTP 组件库选型看这篇就够了

最近项目需要使用 Java 重度调用 HTTP API 接口,于是想着封装一个团队公用的 HTTP client lib. 这个库需要支持以下特性: 连接池管理,包括连接创建和超时、空闲连接数控制、每个 host 的连...

Java面经
49分钟前
4
0
nginx 重启

在 nginx.config 配置目录下 输入命令: nginx -s reload 在 nginx 中,如果我修改了一个配置文件,或者新增了一个配置文件。按照群里网友的描述,我需要关闭 nginx,或者重启 nginx,比较麻...

MrBoyce
50分钟前
0
0
Cesium中级5 - Terrain 地形

Cesium中文网:http://cesiumcn.org/ | 国内快速访问:http://cesium.coinidea.com/ CesiumJS支持对与水流相关的海洋、湖泊和河流以及全球高分辨率地形进行流式处理和可视化。查看山峰、山谷...

Cesium中文网
今天
0
0
搭建jupyter+nginx服务

Tips:该文章面向Mac和centos用户,如果是Windows用户,请先安装虚拟机。 概述 Jupyter Notebook(此前被称为 IPython notebook)是一个交互式笔记本,支持运行 40 多种编程语言。 Jupyter ...

阿dai学长
今天
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部