序员必知的HTML5 video视频二三事序员必知的HTML5 video视频二三事.pdf

序员必知的HTML5 video视频⼆三事 HTML5⽀持直接播放视频，⽽这背后涉及到复杂的视频格式之争，甚⾄还牵涉到所有 的电⼦ 像设备？在过去乃⾄现在，flash仍是⽹页上最好的解决视频的⽅法，诸如优 酷、⼟⾖之流的视频⽹站、还有像虾⽶那样的在线⾳乐⽹站，仍在使⽤flash提供播放 服务。现在这种状况将会随着 HTML5 的发展⽽改变。HTML video 适⽤于HTML 5+ ，⽤于定义在线观看的视频流媒体。 HTML5 (视频)- 如何⼯作 如需在 HTML5 中显⽰视频，您所有需要的是： 实例 video width=320 height=240 controls so rce src=movie .mp4 type=video/mp4 so rce src=movie .ogg type=video/ogg 您的浏览器不⽀持Video标签。 /video 尝试⼀下 » HTML video视频教程 在过去，⾳视频需要通过第三⽅插件来处理 （这样引发的问题是：并不是所有操作系 统或者设备都能使⽤）流览器与插件之间的通信被局限住了，⽽且多媒体就像⼀个⿊ 盒⼦。HTML5出现之后，所有主流浏览器都可以⽀持本地⾳视频了 （包括IE浏览 器），虽然这个过程需要让您的媒体⽂件进⾏双份的编码 （因为IE 和Safari只⽀持 Royalty-enc mbered标准的编码）。有了HTML5 ，突然之间，video可以跟CSS⼀起排 样式了：您可以⽤半透 明的视频相互覆盖，设置边界与背景图⽚，旋转盘旋等变换， 以及其他各种精彩的变形应⽤。 但是，有⼀个核⼼问题，却没有得到解决。HTML5没有规定，浏览器到底应该播放哪 ⼀种格式的视频。浏览器⼚商可以⾃⾏选择⽀持的格式。 怎么让所有浏览器⽀持HTML5 video视频标签？ 使⽤ HTML5 的video可以很⽅便的使⽤ JavaScript 对视频内容进⾏控制等等，功能⼗ 分强⼤，同时代码⽐较少加快加载速度。此外跨平台性⽐较好，特别是⼀些平板、⼿ 机等。例如苹果公司的产品不⽀持flash仅⽀持HTML5 中的video功能。但是 HTML5 的 兼容性问题是个硬伤，我们可以在⽹页中使⽤ video 来播放视频，但使⽤早期浏览器 的访问者可能⽆法正常观看这个视频。此外，由于视频编码器的历史渊源导致各种浏 览器⽀持的视频格式不同。应对这些问题，想在⽹页中使⽤ HTML5 video 功能，可以 按照下⾯三个步骤操作。 1、提 准备好多格式视频⽂件 由于编码器的版权问题，导致不同浏览器对视频格式的兼容性不同。⽬前没有⼀个视 频格式兼容所有浏览器，唯⼀的解决⽅法就是把视频转换成多种格式。 ⾸先要准备⼀个 mp4 格式的视频，可以在苹果设备中使⽤；其次要准备 ogv 格式的视 频，⽤在⽕狐浏览器中；最后要准备⼀下 webm 格式的视频，这个可以⽤在⾕歌浏览 器等。webm 是⾕歌提出的，开源、免费，很有可能成为兼容所有浏览器的视频格 式。 准备多格式浏览器的⿇烦之处在于转换格式。视频转换⼯具国内的功能⽐较少，转换 格式可能没有上⾯后两个，⽽且质量良莠不齐，往往需要注册才能使⽤。推荐⼀个国 外的⼯具 Online converter ，在线免费视频转换⼯具。甚⾄不⽤安装软件，直接选择相 应的⽬标格式，然后上传视频，配置⼀下参数就可以转换出来了。没有合适⼯具的朋 友，可以尝试⼀下。 2、编写对应 HTML5 video 代码 HTML5 中的 video 实际上就是⼀个简单的标签，包含了⼀些视频相关信息等。下⾯直 接给出具体代码，然后简单解释⼀下： XML/HTML Code video width=”800” height=”374” so rce src=”my_video .mp4” type=”video/mp4” / so rce src=”my_video .ogv” type=”video/ogg” / so rce src=”my_video .webm” type=”video/webm” / 你浏览器不⽀持 video 功能，点击这⾥下载视频： a href=”video .webm”下载视频 /a . /video video 标签表⽰这⾥是⼀个视频，width 、height 属性分别表⽰这个视频内容的宽⾼ （单位像素）。video 标签中可以包含 so rce 标签，so rce 标签⽤来表⽰引⽤的视频 和视频的格式、