html5 视频学习笔记。。。

原创 2012年03月29日 22:26:39
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,每天被你伤得很惨。。。


html5 页面嵌入视频

spring 如果遇到:html5 video播放视屏...
  • zmm0420
  • zmm0420
  • 2016年03月09日 17:19
  • 2276

下载网页中的html5视频之手动方法

最近在看慕课网的视频进行学习,中间遇到一个问题,移动端中的视频资源可以直接进行离线缓存,但是pc网页浏览的时候却没有提供相关下载或离线缓存的功能。 下面是自己摸索出来的一个下载方法,操作还是比较简单...
  • sun4lower
  • sun4lower
  • 2015年09月24日 15:13
  • 5475

HTML5 - 使用<video>播放视频

1,下面是一个播放视频的最简单样例 (controls属性告诉浏览器要有基本播放控件)2,通过width和height设置视频窗口大小3,预加载媒体文件 设置preload不同的属性值...
  • u014063717
  • u014063717
  • 2016年03月17日 16:24
  • 12162

强制Html5视频全量加载方法步骤详解

本文和大家分享的主要是强制Html5视频全量加载相关内容,一起来看看吧,希望对大家学习html5有所帮助。   默认情况下我们实现一个简单的 H5 的播放器,只需要这么简单的代码就好:  ...
  • qq_32506555
  • qq_32506555
  • 2017年07月19日 13:01
  • 518

html5视频播放解决方案

html5没学习之前总觉的很神秘。近期通过学习和研究html5有点成果,特总结分享给大家。 众所周知应用开发分两种:一是原生的native app 二是web app,也就是通过浏览器访问的应用。 ...
  • book_areliang
  • book_areliang
  • 2015年10月12日 15:58
  • 1547

使用 WebSockets 进行 HTML5 视频直播

使用 WebSockets 进行 HTML5 视频直播
  • andyliulin
  • andyliulin
  • 2015年05月14日 10:15
  • 18035

html5视频播放器 二 (功能实现及播放优化)

样式改写css,其中的一些按钮是在“阿里妈妈”上找的字体图标,就不向上传了。...
  • yaozhiqi1905658804
  • yaozhiqi1905658804
  • 2017年04月17日 20:02
  • 730

小强的HTML5移动开发之路(5)——制作一个漂亮的视频播放器

来自:http://blog.csdn.net/dawanganban/article/details/17679069在前面几篇文章中介绍了HTML5的特点和需要掌握的基础知识,下面我们开始真正的体...
  • caixingyun
  • caixingyun
  • 2015年09月21日 14:23
  • 962

HTML5视频插件,各种已解决和正在解决的问题

最近在做一个hmlt5的课件项目,客户需要在课件中嵌入HTML5视频,还需要自定义视频的一些控制,默认的视频控制条肯定不能满足,于是需要引入自定义的视频控件。 经过一番研究,最后选定了mediael...
  • u012017466
  • u012017466
  • 2014年03月17日 20:32
  • 1398

HTML5中的视频音频使用详解

一、video1.1 video支持视频格式 常见的视频格式视频的组成部分:画面、音频、编码格式 视频编码:H.264、Theora、VP8(google开源) HTML5支持的视频格式:Ogg 带...
  • jingguanliuye
  • jingguanliuye
  • 2016年12月30日 17:55
  • 1146
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:html5 视频学习笔记。。。
举报原因:
原因补充:

(最多只允许输入30个字)