关闭

html5 视频学习笔记。。。

标签: html5h.264flashfirefoxchrome浏览器
873人阅读 评论(0) 收藏 举报
html5 + flash(flowplayer)

当年浏览器的混战,推动了web标准化,IE家族通过微软强大的捆绑,战胜了Netspace。败阵的网景公司将项目开源。造就了Mozilla基金与其下的Firefox。随着GoogleChrome加入。浏览器竞争更加激烈。HTML5标准化的过程,让新一代具有语义的标记Web。html5原生的video和audio更是带给开发者无穷的乐趣。再也无需依靠flash等第三方插件。

当然新形势并没有完全摆脱旧环境,对于html5标准化,浏览器对其新标签的属性也存在兼容性,其中视频和音频的处理各异。Kroc Camen的天才之作,提供了跨平台的方案,解决了 video for everybod 。

如今移动app的发展,大有入侵web。并且手持设备率先支持html5,为了立柱普通web和移动领域的用户,为移动用户特别编码也是必须。比较好的解决方案之一可以用 html5 + flowplay(flash)解决。

web上了流行的视频中,flash占有大量的市场。自从apple宣布放弃flash的时候,客观上推动了html5的发展,而html5 的视频方案也必须面临由来已久的编码方案。

THEORA VS H.264


视频解码方案中的两大阵营,theora和H.264之间的斗争。最流行的视频格式是H.264。它有很多优点,编码后生成的视频文件,体积较小,画质也不错。不过,H.264是一种专利视频格式。其他人如果要使用H.264,就必须向"专利池"的管理公司申请许可,只有获取了许可才能使用"池"中的所有专利。这就是说,MPEG-LA公司是H.264的实际管理者和收费者。任何支持播放H.264视频的DVD播放机、蓝光播放机、摄像机或者别的设备,都必定有一张MPEG-LA颁发的许可证。

一些人对这种情形,感到担忧和不满。自行开发一种没有专利的视频格式,生成的文件体积要与H.264相仿,画质也要差不多。这种格式就叫做Theora。Theora的主要开发者,也是Ogg Vorbis的开发者。我们就有了一种任何人都可以免费使用、不用担心专利问题的视频格式。尽管如此,还是有人担心“专利潜水艇”,即故意延迟专利的发布,等到时机成熟,市场丰厚的时候,再浮出水面,对毫无戒备的市场收取专利使用费。貌似android就在专利上面很尴尬。

上面两大阵营,以苹果 微软的H.264和火狐,都不支持对方的编码方案。幸运的是,Google加入了其中,并且制定了一套开源,免版税的编码标准,视频质量可与H.264 相媲美。目前仅有苹果不支持vp8,微软宣称在ie9中,只有用户安装任何一款编码都支持vp8.

那么这是视频音频的的编码支持情况如何?

html5视频编码



对于视频编码,支持最好的是Google的 chrome。

html5音频编码



chrome再次胜出,苹果和火狐等继续殴斗。。。

考虑到视频音频联合方案为 




mp4和webm格式的视频,不仅得到大多数视频的支持,还可以兼容之前的flash。这样就能给ie9一下的版本,那些无法支持html5 的浏览器留下回退。

可是,不管选择哪种容器,都需要两套方案为 firefox和opera编码一套,为苹果ie编码一套。最后用flash兼容不支持html5的浏览器。

经测试,采用了 flowplayer的flash的播放器。用html5 方案的video,flowplay可以通过调入javascript进行html结构化和css样式化。

代码:
<!DOCTYPE HTML>
<html>
<head>
<title>html5 demo</title>
<script type="text/javascript" src="js/flowplayer-3.2.8.min.js"></script>
</head>
<body>

<video controls  poster preload=metadata>
<!-- code for firefox,opera,chrome -->
<source src="pr6.ogv" type='video/ogg;codecs="theora,vorbis"'> 
			
<!--  code for firefox chrome opera ie9 -->		 
<source src="pr6.webm" type='video/webm;codece="vp8, vorbis"'>  
			
<!--  code for safari ie9 -->
<source src="pr6.mp4" type='video/mp4;codece="avc1.42E01E,mp4a.40.2"'>  
<!--  your browser don fit html5 video -->
			 
<!--  code for unhtml5 -->
	<a  
		href="media/vidoe/game.mp4"
		style="display:block;width:520px;height:330px"  
		id="player"> 
	</a> 
</video>
	<!-- loading js to contrals flash -->
<script type="text/javascript"> 
	flowplayer("player", "swf/flowplayer-3.2.8.swf"); 
</script> 
</body>
</html>


<video>为html5 特有的标记。ogg提供ogv格式的视频,vp8提供 webm格式视频,最后H.264提供mp4格式的视频,不支持html5的则用flash。<a>标签提供视频源地址(需要用web服务器打开方能有效)。js提供调用播放器和css外观样式化。

至于<audio>音频,即用其标签标记音频文件,至于flash回退的调用也是一样的。

----------------------------------------------------------------------------------------------------------------折腾了一天的视频编码方案,收获还是很大的。看完了官方文档,做了不少实例。翻阅别人的博客。其中最不爽的也有,就是天朝那该死的GFW。很多技术博客被墙,我就不明白哪门子惹着共党了。人家写个教程交流技术的博客都被你墙了,还有一些编辑器的软件也被墙。。。GFW,每天被你伤得很惨。。。


0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:30242次
    • 积分:547
    • 等级:
    • 排名:千里之外
    • 原创:23篇
    • 转载:0篇
    • 译文:1篇
    • 评论:5条
    文章分类
    最新评论