请选择 进入手机版 | 继续访问电脑版

HTML5星空

HTML5星空 首页 HTML5教程 Video 查看内容

HTML5 Video属性讲解及自定义播放器

2013-10-12 20:31| 发布者: admin| 查看: 6070| 评论: 0|来自: 博客园

摘要: html5 video标签可以让用户在不用安装任何插件的情况下轻松的观看视频。大多数用户已经安装了Flash插件(事实上,大概95%的上网用户都装有Flash的某个版本),但HTML 5的支持者正在推动一个开放的,不需要任何插件 ...
        大多数用户已经安装了Flash插件(事实上,大概95%的上网用户都装有Flash的某个版本),但HTML 5的支持者正在推动一个开放的,不需要任何插件。
  总之,这就是所推荐的打算。同时,这也是引起混乱的导火索。对于各种各样编码译码器的争论就已经很烦杂了,但更悲剧的事情是,浏览器制造商们还不能就此达成统一。苹果不愿意使用提议的Ogg Theora编码译码器,但Opera和Mozilla也不愿意支付由于他们的浏览器装载H.264编码译码器而造成的许可费用。Google同时支持两者,微软面对争论,远远的置身事外,因为他现在根本没有计划去支持HTML 5的视频元素。 面对浏览器制造商的僵持局面,HTML 5善意的独裁者Ian Hickson甩了甩他的手并说到去他妈的。

      所以HTML 5规范中没有特别指名或规定的视频编码解码器。”好吧,引用到这儿。 如今的情况是,微软终于陷进去了,但很悲剧的是,在IE 9中只支持H.264。同时,Googe终于在I/O大会上发布了开源的视频封装格式webM和视频编码格式VP8。Opera、Mozilla、Chrome宣布将完全支持VP8,IE宣布部分支持(需要装一个插件,但如果我没记错的话,HTML 5的一个愿景就是脱离浏览器插件,微软真是让人觉得悲剧)。 苹果决定不支持VP8,乔布斯认为VP8在质量或效率方面不如H.264,不能满足其产品的要求。另外最新消息表明VP8还有可能牵扯到专利的问题(如果真的侵犯专利的话,Opera和Firefox估计马上会无视VP8的)。 说了这么多,其实说到底就是,现在如果要在页面中使用video标签,需要考虑三种情况,支持Ogg Theora或者VP8(如果这玩意儿没出事的话)的(Opera、Mozilla、Chrome),支持H.264的(Safari、IE 9、Chrome),都不支持的(IE6、7、8)。好吧,现在让我们从技术层面来认识HTML 5的视频,包括video标签的使用,视频对象可以用到的媒介属性和方法,以及媒介事件。 

我们来看看video标签具体是怎么使用的以及它有哪些属性和方法。

使用方法:

 <video width="320" height="240" controls="controls">
  <source src="movie.ogg" type="video/ogg">
  <source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
video>
 
各浏览器目前对html5视频格式的支持:

浏览器 | 影音格式 Ogg Theora MP4(H.264) WebM
Microsoft Internet Explorer9 × ×
Mozilla Firefox5+ ×
Google Chrome13+
Apple Safari5+ × ×
Opera11+ ×
 

属性列表:

autoplay autoplay 如果出现该属性,则视频在就绪后马上播放。默认为false
controls controls 如果出现该属性,则向用户显示控件,比如播放按钮。这些控件是由浏览器来提供的,样式也可能因为不同浏览器而不一样
height pixels 设置视频播放器的高度。
loop loop 如果出现该属性,则当媒介文件完成播放后再次开始播放。
preload none、metadata、auto
如果出现该属性,则视频在页面加载时进行加载,并预备播放。如果使用"autoplay",则忽略该属性。

auto - 当页面加载后载入整个视频
meta - 部分预加载。使用此属性值,代表页面制作者认为用户不期望此视频,但为用户提供一些元数据(包括尺寸,第一帧,曲目列表,持续时间等等) 
none - 不进行预加载。使用此属性值,可能是页面制作者认为用户不期望此视频,或者减少HTTP请求
src url 要播放的视频的URL。
 poster url 预览图  媒介属性  一般用于js操作

属性 可读状态 描述
error 只读
使用media.error返回一个MediaError对象表明当前的错误状态,如果没有出错,返回null,共有4个可能值。

MEDIA_ERR_ABORTED(数字值为1):媒体资源获取异常;
MEDIA_ERR_NETWORK(数字值为2):网络错误;
MEDIA_ERR_DECODE(数字值为3):媒体解码错误;
MEDIA_ERR_SRC_NOT_SUPPORTED(数字值为4):视频格式被不支持。
currentSrc 只读 返回该媒介标签的src属性值
networkState 只读 返回媒介的网络状态,共有4个可能值。
NETWORK_EMPTY(数字值为0):尚未初始化;
NETWORK_IDLE(数字值为1):加载完成,网络空闲;
NETWORK_LOADING(数字值为2):视频加载中;
NETWORK_NO_SOURCE(数字值为3):加载失败。
 preload 可读写 可获取或改变媒介标签的preload属性值
 buffered 只读 返回一个TimeRanges对象,确认浏览器已缓存媒介文件
 readyState 只读  
返回媒介当前播放位置的就绪状态,共有5个可能值。

HAVE_NOTHING(数字值为0):当前播放位置无有效媒介资源;
HAVE_METADATA(数字值为1):加载中,媒介资源确认存在,但当前位置没有能够加载到有效媒介数据进行播放;
HAVE_CURRENT_DATA(数字值为2):已获取到当前播放数据,但没有足够的数据进行播放;
HAVE_FUTURE_DATA(数字值为3):已获取到后续播放数据,可以进行播放;
HAVE_ENOUGH_DATA(数字值为4):可以进行播放,且浏览器确认媒体数据以某一种速度进行加载,可以保证有足够的后续数据进行播放,而不会使浏览器的播放进度赶上加载数据的末端。
 seeking 只读 返回一个布尔值,表明浏览器是否正在请求数据,ture表示浏览器正在请求数据,false表示浏览器已停止请求。
 seekable 只读 发挥一个TimeRanges对象,表明可以对当前媒介资源进行请求。
 currentTime 可读写 获取或改变视频的播放位置。单位为秒
 startTime 只读 返回媒介文件播放的开始时间,通常为0
 duration 只读 返回媒介文件总的播放时长
 played 只读 返回一个TimeRanges对象,标明浏览器已播放的媒介资源范围
paused 只读 返回一个布尔值,表明媒介是否暂停播放,ture表示媒介暂停播放,false表示媒介正在播放。
ended 只读 返回一个布尔值,表明媒介是否已结束,ture表示媒介已经播放完毕,false表示还未播放完毕。
defaultPlaybackRate 可读写 返回媒介默认的播放速率,或对其赋值,改变媒介的默认播放速率。
playbackRate 可读写 返回当前的媒介播放速率,或对其赋值,改变当前的媒介播放速率
autoplay 可读写 返回一个布尔值,表明当前媒介是否设置了自动播放,ture表示当前媒介为自动播放,false表示非自动播放,或对其赋值,设置是否自动播放。
loop 可读写 返回一个布尔值,表明当前媒介是否设置了循环播放,ture表示当前媒介设置了循环播放,false表示没有设置循环播放,或对其赋值,设置是否循环播放。
controls 可读写 返回一个布尔值,表明当前媒介是否使用了浏览器默认的播放控制栏,ture表示加载了,false表示没有加载,或对其赋值,设置是否使用浏览器默认的播放控制栏
 volume 可读写 返回当前媒介的音量值,或对其赋值,改变媒介的播放音量,范围为0到1,0相当于静音,1为最大音量。
 muted 可读写 返回一个布尔值,表明当前媒介播放是否开启静音,ture表示没有开启静音,false表示静音,或对其赋值,设置播放是否静音。
 

 很简单,那我们来做一个demo。(很奇怪,chrome拖动进度条到最后视频有几率就死掉,自动播放到最后没有问题,这是bug?还是我自己的问题?)



鲜花

握手

雷人

路过

鸡蛋

相关阅读

快讯
发布主题

     京ICP备14042305号

html5star team © 2012-2013 html5星空 Comsenz Inc.

GMT+8, 2017-11-25 07:45 , Processed in 0.075764 second(s), 26 queries .

返回顶部