HTML 5 Video简介.pdf

HTML 5 VideoHTML 5 Video 概述概述 HTML 5 VideoHTML 5 Video 概述概述 1 Video1 Video 介绍介绍 1 Video1 Video 介绍介绍 “当今，在网页上嵌入视频且所有用户不管使用任何浏览器或者操作系统都能 看到的唯一可靠方法是使用 Flash。这需要 Adobe Flash 插件，并且结合 object和embed标签。 大多数用户已经安装了 Flash 插件（事实上，大概 95%的上网用户都装有 Flash 的某个版本），但 HTML 5 的支持者正在推动一个开放的，不需要任何插件的视 频标准。这就是 HTML 5 的新标签video带来的构想，他提供了一个嵌入视频 （以及与其交互）而不需要类似 Flash 的私有插件的方法。 不幸的是，视频并非那么简单。不仅仅是浏览器需要理解video标签，而且需 要一个必要的编码译码器来播放视频。明显的解决方法只能是 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 宣布部分支持（需 要装一个插件，但如果我没记错的话，HTML5 的一个愿景就是脱离浏览器插 件，微软真是让人觉得悲剧）。 苹果决定不支持 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标签的使 用，视频对象可以用到的媒介属性和方法，以及媒介事件。 2 Video2 Video 标签的使用标签的使用 2 Video2 Video 标签的使用标签的使用 Video 标签含有 src、poster、preload、autoplay、loop、controls、width、 height 等几个属性，以及一个内部使用的标签source。 Video 标签内除了可以包含source标签外，还可以包含当指定的视频都不能 播放时，返回的内容。 2.1 src2.1 src 属性和属性和 posterposter 属性 属性 2.1 src2.1 src 属性和属性和 posterposter 属性属性 你能想象 src 属性是用来干啥的。跟img标签的一样，这个属性用于指定视频 的地址。 而 poster 属性用于指定一张图片，在当前视频数据无效时显示（预览图）。视 频数据无效可能是视频正在加载，可能是视频地址错误等等。 2.2 preload2.2 preload 属性 属性 2.2 preload2.2 preload 属性属性 这个属性也能通过名字了解用处，此属性用于定义视频是否预加载