Posts tagged: html5

基于html5的客户端图表生成方案

尝试过很多种图表生成方案,比较有代表性的: 服务器端生成图表方案,比如通过jfreechart; 使用云计算的方式,比如通过google提供的chart api,可以参见使用google chart生成动态图; 使用flash的免费开源应用,比如fusioncharts,在浏览器端生成图表,效果可见:http://www.fusioncharts.com/free/demos/ 使用html5的canvas api在浏览器端生成图表。 其中前两者是通过服务器端生成的,后两者是通过客户端生成的。 服务器端的缺点是: 图表缺乏交互性,比如折线图,鼠标放在某个点上,希望看到该点的值,就做不到; 带宽和流量问题,比如通过手机访问,手机是按流量计费的,对服务器端也会有影响,当大规模访问的时候挤占服务器端带宽; 服务器端性能,当大规模访问的时候服务器端生成图表性能下降。    发送文章为PDF   

星期一 七月 5th, 2010 in , , , | 2 Comments »

gwt使用html5的Geolocation api

html5提供geolocation api,用于获取浏览器所处地理位置相关信息。 通过pc上面的chrome/firefox访问获得的经纬度,发现还是很准的。 获得经纬度,可以通过: http://maps.google.com/ 在输入框中输入:纬度,精度,就可以得到对应的卫星图或者地图。 代码编写也很容易,这里使用了gwt,其实即使不使用gwt,写javascript也很简单。 这里使用的gwt模块,文档地址在: http://code.google.com/p/gwt-mobile-webkit/wiki/GeolocationApi 下载地址: http://code.google.com/p/gwt-mobile-webkit/downloads/list 选择gwt-html5-geolocation-xxx.tar.gz。解压缩,将其中的.jar文件部署到gwt项目的classpath下。 在模块的配置文件中,增加: <inherits name="com.google.code.gwt.geolocation.Html5Geolocation" /> 代码: public void onModuleLoad() {     if (Geolocation.isSupported()) {         Geolocation geo = Geolocation.getGeolocation();         if (geo != null) {             geo.getCurrentPosition(new PositionCallback() {                 @Override                 public void onFailure(PositionError error) {                     Window.alert("error");                 }                 @Override                 [...]

音频编码

除非看的电影是1927年以前的,你希望视频带一个音频track。和视频编码类似,音频编码也有有损编码和无损编码之分。无损音频很大,不适合在web中使用,因此以下只关注有损编码。 实际上,研究在web视频领域的音频编码,可能范围还要在缩小一些。音频用于更广泛的领域,和视频比较来说,比如电话,这是一个专门的领域,针对语音音频的编码优化。你不可能对音乐cd使用这样的编码,那么结果听起来可能像4岁的孩子在唱歌。但是你可以将这种编码用于数字电话交换机(PBX),因为带宽很宝贵,该编码可有效的压缩人类声音。但是这种编码却反通用的支持,比如浏览器自身或者第三方插件,因此下文只讨论通用的有损编码格式。 如以前提及的那样,当你提及“看视频”的时候,你的电脑正在做一下事情: 解释容器格式; 解码视频流; 解码音频流并发送声音到音箱。 音频编码解码,就是针对音频流的处理。有很多技术用于减少音频流的数据量。减少的数据往往是人听觉不到的部分。 一个音频有,而视频没有的概念是,频道(channel)。发送声音到你的音箱,对吧?那好,你有多少音箱呢?也许只有两个,一个左边的,一个右边的。或者比如有三个,左、右,还有一个放在地板上。所谓“环绕立体声”系统可以有六个或者更多的音箱,摆放在屋子的周围。每一个音箱的得到特定的原始声音的一个频道。这样你就会有身临其境的听觉感受。 大多数通用的音频编码处理两个频道的声音。在录制的时候,声音已经区分为左右频道。在编码的时候,两个频道的声音存储在同一个音频流中,在解码时,两个频道解码然后发送到对应的音箱上。一些编码器可以处理超过两个频道的声音。 有很多声音编码器,但是在web方面,只需要知道三个:mp3,aac和vorbis。    发送文章为PDF   

星期四 十二月 10th, 2009 in , , | No Comments »

视频编码器

当你谈论“看一个视频”的时候,你实际上是在谈论一个视频流和一个音频流的合成的内容。但是并不存在两个不同的文件。你似乎只有“这个视频”。也许它是一个avi文件,或者mp4文件。它们只是容器格式,类似zip文件包含了多种文件类型的文件。容器格式定义了怎么在单一的文件中存储视频和音频流。 当你“看一个视频”的时候,视频播放器在做以下一些事情: 解释容器格式,从中找到那些视频和音频track可用,它们是如何存储在文件中的,并可读取它们的数据,为下一步解码做准备; 解码视频流,显示一系列的图片到屏幕上; 解码音频流,发送声音到音箱。    发送文章为PDF   

星期四 十二月 3rd, 2009 in , , | No Comments »

视频容器格式

你也许会想,视频文件就是比如“avi文件”或者“mp4文件”。而实际上,avi和mp4只是容器格式。好比zip文件,里面可以包含各种文件,视频容器格式只是定义了怎么存储数据,而不论存储什么类型的数据。不过视频容器格式比这个更复杂一些,因为不是所有的视频流格式兼容所有的视频容器格式。 一个视频文件一般包含多个track,而每个视频track(没有音频)又可对应一到多个音频track。这些track又总是相互关联的。每个音频track内部包含标记用于和视频同步。每个track可包括元数据,比如视频track的纵横比(视频长和宽),或者音频track的语言。容器也可以有元数据,比如视频自身的题目,视频的封面,片段号码(用于在电视上展示)等等。    发送文章为PDF   

星期四 十二月 3rd, 2009 in , , | No Comments »

html5 video简介

在过去四年里,如果你访问过youtube.com(或者国内的比如youku.com),你可以看到视频可以嵌入到网页当中。 但是在html5以前,没有基于标准的方式来实现这种功能。实际上,你看到的在网页上的视频,是通过第三方的插件实现的,也许是quicktime,或者realplayer,或者flash(youtube和国内的很多视频网站都是用的flash)。这些插件和浏览器集成的很好,让你感觉不到在使用它们,除非你在一个不支持这个插件的平台观看它,比如ubuntu linux下面的浏览器就默认没有安装flash插件。 html5定义了标准的方式在网页中嵌入视频,使用<video>标签。对<video>标签的支持还在发展当中,至少不是在所有的地方可用,以下显示<video>标签浏览器支持情况:    发送文章为PDF   

星期四 十二月 3rd, 2009 in , , | No Comments »