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

        大多数用户已经安装了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？还是我自己的问题？)