Explore. Dream. Discover.

HTML 5 Inside – Multi Media 多媒体

Tue, 09 Feb 2010 20:59:53 +0800

本文基于 HTM5 标准草案 2009年8月25日版
转载请保留出处：http://SamuelChen.net

在以前的猫（modem）年代，人们挣扎在以几或者几十 bit 与 byte 来计量的传输速率上。在那个时候，几乎所有的内容都是基于文字的，电子邮件、新闻组、BBS甚至网页。不像现在，我们可以在网页中放入众多的图片、视频甚至游戏，那时候人们常常使用字符阵来组成图像，表达略微丰富一点的内容（在BBS最常见）。即使是这样，都让人欣喜不已。

随着带宽的不断提高，那么何时我们可以在页面中加入图片了呢？我找到了这篇文章 - “Why do we have an IMG element?”。这篇文章记述了 img 标签的来由， img 元素是在1993年的时候才被提议加入HTML的。

今天，在HTML5中，加入了两个新的元素 video 和 audio ，用于视频和音频的呈现，更加的丰富了媒体内容的表达。

那么我也问一下，为什么我们要有 video 和 audio 元素？

首先，带宽的提高，使得视频、音频的在线观看已经很方便。

其次，目前web页面中用以播放视频和音频的主要手段是嵌入第三方插件，坏处显而易见，无论是安全性或者是性能，都不如浏览器原生支持的好。

因此，我们需要在HTML5中引入新的元素来原生支持更多的媒体内容。

video 元素

video 元素是用来在页面中呈现一段视频或者电影的元素。如果浏览器不支持该元素，那么就不应将该元素呈现给用户。

video 元素在内容模型中，同时属于Flow content, Phrase content 和 Embeded content。很好理解，因为它引入其他的资源，所以是Embeded；而Embeded 包含于Phrase，Phrase又包含于Flow。或者这么理解，由于它参与布局（有至少一个text或者embeded子节点），所以是Flow content；它有内容（有至少一个text或者embeded子节点），所以是Phrase content。

如果video包含了control属性，那么它是一个Interactive content。同样很好理解，因为有了控制面板，所以可以交互。

下面以一个例子来说明.

Avatar - Film Clip

代码如下：

  1: <video id="avatar" width =320 height=240
  2:   src="http://www.youtube.com/get_video?video_id=CXF-VZVdR2Y&t=vjVQa1PpcFOgfEMPW684qS5mePzQgVa3Oo4l0YQnvSc%3D&fmt=18"  
  3:   controls  autobuffer autoplay loop
  4:   poster="http://farm3.static.flickr.com/2779/4202108032_3a261b7370.jpg"
  5: />
  6:

与大多数元素一样，video 也可以使用id来定义唯一标识，width和height来定义宽高，以及其他的全局属性（Global attributes），就不再赘述。

代码中第2、3行的几个属性是媒体元素（media element）的通用属性，也就是说，audio也有这几个属性。

与img元素一样，video也是用src 属性来用以标识媒体源，其值是一个URL字符串。指定该属性后，浏览器在渲染时就会用原生播放器载入该视频。要注意的是，img不属于媒体内容，因此它的src与这个src本质上是有区别的。

另外的四个标签都是布尔型，分别用来获取或设置播放器的行为，其作用如下：

controls 设置是否显示播放界面，使得用户可以进行播放、暂停、随机浏览或者全屏等操作。标准中提到的这些功能用的是“应该（should）”，那么这些功能就不是必须的，具体的功能和外观依赖于浏览器的实现。

autoplay 设置是否自动播放。当含有此属性时，播放器会在载入呈现之后立即尝试播放指定的媒体资源。

autobuffer 设置是否自动缓存。当含有此属性时，意味着页面制作者提示浏览器（或客户程序）该媒体内容极有可能被用户播放，播放器需要在载入呈现之后开始下载媒体资源并缓存，但并不立即播放。如果video元素同时含有该属性与autoplay属性，该属性必须被忽略，但这不认为是一个错误。

loop 设置是否循环播放。如果该属性被指定，则意味着提示播放器需要在该媒体播放至结尾后重新从头开始播放。

第4行的 poster 属性是video的特有属性，用来标识该媒体资源的海报（静态画面，一般来说是显示视频中第一个非空白帧）。如果指定了该属性，那么当媒体内容无效时，会显示指定的图片。该属性值是一个指向图片的URL。经过测试，在没有被缓存或者播放的情况下（内容没有载入时），都会显示该图片。

另外，video 元素还有两个特有的属性 videowidth 和 videoheight 。这两个属性是只读的，分别用来获取视频固有解析度的宽和高，如果未知则返回0。

audio 元素

audio 元素用来在页面中呈现一段音频或音乐。由于同样属于媒体元素，audio具有和video类似的内容模型和属性。与 video 不同的是，audio 是没有 width, height, poster 以及 videowidth 和 videoheight 的。很容易理解，audio 是没有视觉内容的，所以这些和显示有关的属性都没有。

看一个例子：

富士山下 - 陈奕迅

  1: <audio id="mp3" 
  2:   src="http://event1.wanmei.com/cb/response/upload/audio/witouch/1190691011788.mp3"  
  3:   controls  autobuffer loop autoplay
  4: />
  5:

source 元素

source 元素是个比较特殊的元素，它是用来指定媒体元素的源信息的，换句话来说就是用以替代 audio 或者 video （或者如果有其他 media element ）中的 src 属性的，它比 src 属性提供了更为丰富的源信息。

source 元素可以为媒体元素指定多个资源，但它本身并不会有任何表现形式。该元素一般作为一个媒体元素的子元素，但也可以独立存在，在标准中并没有提到这一点。当它独立存在时，可以利用DOM和脚本来使用它。

source 元素不属于任何内容模型，它具有 src, type 和 media 这些特有属性。

src 属性和 video, audio 的一样，是资源的有效URL，要注意的是，在 source 元素中，src是必须要有的。

type 属性是用来指定资源类型的，其值应为有效的MIME类型字符串，例如 ”video/mp4” 等，从而帮助播放器判断要播放的媒体内容的类型。该属性有一个参数 codecs ，用来指定特定媒体编码解码器，例如 “mp4.v.20.8, mp4a.20.2” 。

media 属性不是 source 元素特有的属性，也可以用于 link 等元素，它被用来指定一条 MQ （media query）。MQ是用来限定媒体使用的设备以及显示相关等范围的表达式，具体内容请参看 Mozilla Dev Center 。

参考示例（该示例来源于Mozilla 网站）

  1: <video controls>  
  2:   <source src="foo.ogg" type="video/ogg"> <!-- Picked by Firefox -->  
  3:   <source src="foo.mov" type="video/quicktime"> <!-- Picked by Safari -->  
  4:   I'm sorry; your browser doesn't support HTML 5 video.  
  5: </video>

Media 元素（DOM）

Media Elements 实际上是 DOM 中这些媒体元素的基类型，audio 和 video 都可以看做是其子类型（但具体的情况要看浏览器的实现）。 src, autobuffer, autoplay, loop 以及 controls 这些个属性都是其共有的。

Media Elements 定义了一个接口，包括各种状态、常量、属性和方法，同时还定义了各种类型的事件，使得大家可以在脚本中很容易的操作。标准定义很长，请参看 W3C HTML5 - Media Element ，如果以后有相关的深入研究再写，现在用一个视频播放器的小例子来介绍其主要用法。

HTML5 Media Elements sample - Simple Video Player

安全和隐私

由于 video 和 audio 的资源可以来自其他网站，因此主要的安全与隐私上的考虑和影响是跨站攻击。这是浏览器实现要考虑的问题，就不再赘述。

HTML 5 Inside – Overview 总览

Tue, 09 Feb 2010 11:23:57 +0800

本文基于 HTM5 标准草案 2009年8月25日版
转载请保留出处：http://SamuelChen.net

HTML5并不是一个全新的语言，它只是在HTML4的基础上进行进化，去掉了一些内容修饰的tag，增加了许多新的特性。我们可以简单的认为 HTML5 = HTML4 - legacy features + colletion of new features
HTML5 有一个很重要的改变，那就是强化了语义。更多的标签引入带来了更加丰富的语义，使得爬虫、解析程序对页面的理解可以更加贴近人的理解。
下面从各个方面来说说。

兼容性

我们常说某某浏览器支持或者不支持HTML5，其实这个并不是一个严谨的说法。事实上，HTML只是一种标记性语言，它是被浏览器解析并渲染显示的，所以并不存在HTML5支持不支持，而应该是HTML5中某一元素是否能被浏览器支持。

由于HTML5是由HTML4发展而来，很多旧有的元素本身就能支持，因此，HTML5是兼容HTML4的，我们更多的是说某浏览器引擎是否支持HTML5中的某一特性。

各浏览器引擎对元素的支持，来自 Comparison of layout engines (HTML5) - Wikipedia

那么自然而然就有一个问题，如何去判断一个浏览器是否支持某一个特性？我们可以通过创建一个元素是否成功来判断，比如创建函数supports_canvas() 用来判断是否支持canvas :

1:   function supports_canvas() {
2:     return !!document.createElement('canvas').getContext;
3:   }

然后调用这个函数来判断是否支持canvas :

1: if (supports_canvas()) {
2:   document.write("Your browser supports canvas.");
3: } else {
4:   document.write("Your browser does not support canvas.");
5: }

结果如图所示, Chrome4 支持 IE6 不支持:

有人将所有类似的函数封装成了一个库 Modernizr ，你可以直接使用 Modernizr.canvastext, Modernizr.video, modernizr.video.h264 等方式来判断是否支持指定的特性。

内容模型（Content Models）

HTML5采用了一种新的内容模型用以替代HTML4中block和inline的概念。

HTML5 中，所有的元素（Elements）都属于（拥有）某一个定义好的内容模型，这个内容模型描述了这个元素中可以包含哪些节点。

任何一个元素都归于0或多个内容分类，以便将具有相似特性的元素归组。HTML5标准中的内容分类有如下几种（某些元素也会归于其他分类）：

Metadata content
Flow content
Sectioning content
Heading content
Phrasing content
Embedded content
Interactive content

这些分类之间的关系如图所示。

Metadata content 表示该内容用于设定内容的呈现、行为、文档（document）之间的关系或者传递外界信息（converys “out-of-band” information），基本上可以理解为元素的元数据。

base, command, link, meta, noscript, script, style, title 这些元素、属性或者标签都属于Metadata Content.

非HTML命名空间下的元素，如果它的语义主要是元数据相关的（metadata-related），那么它也是属于metadata content。比如引入第三方的namespace来支持RDF，那么此时就认为这个是属于 metadata content。如代码中所示:

1: <html xmlns="http://www.w3.org/1999/xhtml"
2:       xmlns:r="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
3:  <head>
4:   <title>Hedral's Home Page</title>
5:   <r:RDF>
6:    <Person xmlns="http://www.w3.org/2000/10/swap/pim/contact#"
7:            r:about="http://hedral.example.com/#">
8:     <fullName>Cat Hedral</fullName>
9:     <mailbox r:resource="mailto:hedral@damowmow.com"/>
10:     <personalTitle>Sir</personalTitle>
11:    </Person>
12:   </r:RDF>
13:  </head>
14:  <body>
15:   <h1>My home page</h1>
16:   <p>This is my home page.</p>
17:  </body>
18: </html>

其他几个Content就不一一解释了，看着图加上顾名思义，都比较容易理解。请参考文档 Content Model on Spec 。

文档结构

HTML5 引入了多个新的元素用来更加细致的描述页面、文档结构，这些元素包括 header, nav, section, article, aside, footer ，用以替代目前的使用 div 或者 table 的方式。使用这些元素，作者可以让文档页面更加具有语义，更加易读，也可以让搜索引擎更好的理解页面的内容和各个部分之间的关系，应用API也能更容易、更准确细微的访问文档对象。

如下图（来自于smashing magzine）所示，非常清晰的表述了各个元素对应的文档内容关系。注意，这些元素并不包含布局信息。

其他变化

HTML5基本上是基于DOM的使用来定义该语言的，而HTML4和之前的版本是基于显示与布局的，所以我们在使用时要注意，出发点的不同会造成开发模式侧重点的不同。

沙箱，iframe的不同。HTML5中的iframe除了保留原有的嵌入网页的功能外，还增加了一个沙箱（sandbox）的新功能。这个沙箱功能使得在iframe中载入的网页能受到一系列限制，从而可以增加安全性和稳定性。使用这个功能，需要在iframe元素中使用”sandbox” 属性（attribut）。

可访问性的增强。增加了一些内建提高访问性（accessibility）的属性（比如hidden）、元素（比如progress）。

交互性增强。增加了命令（command）、菜单（menu）、拖拽（Drag & Drop）、撤销管理（Undo Manager）以及复制粘贴（Copy & Paiste）等元素、属性或特性。

其他的一些变化，请参考spec，如果有时间会在后面的章节中介绍。

HTML5 标准中增强了对于作者（author）和用户代理（user agent）的描述，我将根据不同的上下文，将 author 称为作者、开发人员或者其他，将 user agent 称为客户程序、浏览器、搜索引擎、播放器（浏览器中）或者其他。

HTML 5 Inside - 深入HTML 5

Thu, 04 Feb 2010 15:16:52 +0800

本文基于 HTM5 标准草案 2009年8月25日版以及 HTML5与HTML4的不同 2009年8月25日版。
转载请保留出处：http://SamuelChen.net

HTML 5 的概念始于2003年，在2004年初期行成其第一个只包括form相关的一些内容的草案，并于同年被提请加入到W3C以探讨互联网应用的未来。显然，这么初步的提案是要被拒的，不过这也引起了很多公司的关注。不久之后，Apple、Mozilla 以及 Opera 都声明愿意继续在这个提案的基础之上进行进一步的研究工作，并将该提案转移到了WHATWG，同时建立了一个正式的公共邮件列表用以讨论。直到2006年，W3C 才表示了对该提案的兴趣，并于2007年建立专项工作组和WHATWG共同工作。至此，所有的工作组才共同合作发展HTML5。

有人说，HTML5是改变Web开发的新起点，它增加了如此多的让人期待的特性，使得富浏览器端应用不再让人头疼；而也有人说，HTML 5 是W3C 平衡商业利益向WHATWG低头的产物，只是对HTML4进行了些许改进，没有好的设计与规划，只是一个劲的往里塞特性，实质上是一种倒退。

商业巨头们的战争，咱们小家寡民也甭咸吃罗卜淡操心，无论如何，HTML5是一个有着很大变化的新标准，其特性从实用层面上来看，也是非常不错的。

HTML 5 草案形成有一段时间了，同时也有很多的浏览器支持了，很多特性基本上已经定型，更多的只是在细节上变化。因此，在这儿更加详细和深入的研究它，并计划写一个系列记录及分享心得。

名字就叫 html 5 inside 了，至于能不能真正做到 inside 咱慢慢来吧，学而时习之，边学边写。

先来道开胃菜，大家看看这些应用和例子，相信能坚定大家看好HTML5的决心：

基于 webkit 的 video player （其实webkit的内容和播放视频无关）
HTML5 canvas examples 这个里面有很多例子，还有很炫的游戏！
厉害的来了！ HTML+JS+SVG 的 Flash runtime !

索引（可能会修改）

HTML 5 Inside – Overview 总览
HTML 5 Inside – Interative 交互
HTML 5 Inside – Canvas 画布
HTML 5 Inside – Multi Media 多媒体
HTML 5 Inside – Map 地图
HTML 5 Inside – Local Storage/Offline Cache 本地存储/离线缓存
HTML 5 Inside – Web Socket 页面上的套接字
HTML 5 Inside – Work Thread 工作线程
HTML 5 Inside – Messaging 消息
HTML 5 Inside – Drag & Drop 拖拽
HTML 5 Inside – Copy & Paste 复制粘贴
HTML 5 Inside – Dialog, Progress UI增强
HTML 5 Inside – DOM 文档对象结构
HTML 5 Inside – DataGrid 数据表格

Resources:

Drive Into HTML 5 – Mark Filgrim
Lachlan Hunt – W3C member
More on developing naming conventions, Microformats and HTML5
A Preview of HTML 5 – Lachlan Hunt
Semantics in HTML 5 – John Allsopp
Preparing for HTML5 with Semantic Class Names
HTML 5 Tag Reference – W3C Shool
HTML 5 Validator – W3C
HTML5 and the future of the Web

JSON 简介

Wed, 20 Jan 2010 11:17:02 +0800

2009年11月给同事做的一个关于JSON的介绍。

An introduce to Twitter

Thu, 12 Nov 2009 11:08:08 +0800

2009年6月给同事做的一个关于Twitter的介绍。

Soccer Basic

Thu, 12 Nov 2009 10:59:07 +0800

2009年Q2 给同事做的一个关于足球基本知识的介绍。

Htc hd

Thu, 13 Aug 2009 00:09:00 +0800

This a mail from window mobile.
??????????????

(英文rom 发邮件还是有乱码，不知道是 blogger的问题还是手机问题，发的时候是utf8。)

dell's trick

Sat, 10 Jan 2009 23:44:03 +0800

dell's trick,
originally uploaded by Samuel Chen.

同一台显示器，在装机自选中 3385，单买只要2699，够黑的。

看来要步步为营啊，这世道。

英语短语

Sat, 10 Jan 2009 23:39:10 +0800

你曾经因为一字之差而闹笑话吗？有哪些字是你刻骨铭心的惨痛经验？你觉得有哪些关键字汇让你顿足捶胸，或茅塞顿开？

当考路的考官说“pull over”时，你是否会不知所措？有人邀请你参加“Potluck Party”时，你会不会空手赴宴？在速食店里，店员问“for here or to go?”你是否会丈二金刚摸不着头脑，莫名其妙？“Give me a ring!”可不是用来求婚的。“Drop me a line!”更非要你排队站好。老美说“Hi! What’s up!”你可别说“I am fine!”

你曾经闹过这些笑话吗？让我们来看看，这些字，你怎么说？ Potluck Party：一种聚餐方式，主人准备场地和餐具，参加的人必须带一道菜或准备饮料，最好事先问问主人的意思。

Pull over！把车子开到旁边。
Drop me a line！写封信给我。
Give me a ring = Call me！来个电话吧！
For here or to go？堂食或外卖。
Cool：That’s cool! 等于台湾年轻人常用的囗语“酷！”，表示不赖嘛！用于人或事均可。
What’s up? = What’s happening?=What’s new? 见面时随囗问候的话“最近在忙什么？有什么新鲜事吗？”一般的回答是“Nothing much!”或“Nothing new!”

Cut it out! = Knock it out！= Stop it! 少来这一套！同学之间开玩笑的话。
Don’t give me a hard time! 别跟我过不去好不好！
Get yourself together! 振作点行不行！ Do you have "the" time? 现在几点钟？可别误以为人家要约你出去。
Hang in there. = Don’t give up. = Keep trying. 再撑一下。
Give me a break! 你饶了我吧！（开玩笑的话）
Hang on. 请稍候。 Blow it. = Screw up. 搞砸了。
What a big hassle. 真是个麻烦事。
What a crummy day. 多倒楣的一天。
Go for it. 加油 You bet. = Of course. 当然；看我的！
Wishful thinking. 一厢情愿的想法。
Don’t be so fussy! 别那么挑剔好不好。
It’s a long story. 唉！说来话长。
How have you been? = How are you doing? 你过得如何？近来可好?
Take things for granted. 自以为理所当然。
Don’t put on airs. 别摆架子。
Give me a lift! = Give me a ride! 送我一程吧！
Have a crush on someone. 迷恋某人
What’s the catch? 有什么内幕？
Party animal. 开Party狂的人(喜欢参加舞会的人)
Pain in the neck. =Pain in the ass. 眼中钉，肉中刺。
Skeleton in the closet. 家丑
Don’t get on my nerve! 别把我惹毛了！
A fat chance. =A poor chance. 机会很小
I am racking my brains. 我正在绞尽脑
She’s a real drag. 她真有点碍手碍脚
Spacingout = daydreaming. 做白日梦
I am so fed up. 我受够了！
It doesn’t go with your dress. 跟你的衣服不配。
What’s the point? = What are you trying to say? 你的重点是什么？
By all means = Definitely. 一定是。
Let’s get a bite. = Let’s go eat. 去吃点东西吧！
I’ll buy you a lunch (a drink; a dinner). = It’s on me. = My treat. 我请客
Let’s go Dutch. 各付各的
My stomach is upset. 我的胃不舒服
diarrhea 拉肚子
吃牛排时，waiter会问“How would you like it?”就是问“要几分熟”的意思，
可以选择rare， medium或 well-done。
I am under the weather. =I am not feeling well. 我不太舒服!
May I take a rain check? 可不可改到下次？(例如有人请你吃饭，你不能赴约，只好请他改到下一次。)
I am not myself today. 我今天什么都不对劲!
Let’s get it straight. 咱们把事情弄清楚!
What’s the rush! 急什么!
Such a fruitcake! 神经病！ I’ll swing by later. =I’ll stop by later. 待会儿，我会来转一下。
I got the tip straight from the horse’s mouth. 这个消息是千真万确的（tip指消息）!
easy as pie = very easy = piece of cake 很容易。
flunk out 被当掉
take French leave 不告而别
I don’t get the picture. =I don’t understand. 我不明白。
You should give him a piece of your mind. 你应该向他表达你的不满。
hit the road = take off = get on one’s way 离开。
Now he is in the driver’s seat =He is in control now.
Keep a low profile (or low key). 采取低姿态。
Kinky =bizarre =wacky =weird 古怪的。 klutz (=clutz) =idiot 白痴、笨蛋。

know one’s way around 识途老马。
lion’s share 大部分。
tailgate 尾随（尤其跟车跟得太近）。
take a back seat. 让步。

take a hike =leave me alone =get lost 滚开。
hit the hay =go to bed 睡觉。
Can you give me a lift? =Can you give me a ride? 载我一程好吗？
green hand 生手、没有经验的人。
moonshine = mountain dew 指私酿的烈酒（威士卡）或走私的酒。
胡说八道也可用moonshine。His story is plain moonshine.
chill out =calm down =relax（来自黑人英语）
rip off =steal：I was ripped off. 我被偷了；rip off 也常被用为“剥夺”My right was ripped off. 权利被剥夺(来自黑人英语)。
我们称美国大兵为G.I. (Government Issue) or GI Joe, 德国兵或德国佬为 Fritzor Kraut，称英国佬为John Bull，日本人为Jap.或Nip，犹太人为Jew都是很不礼貌的称呼。
mess around (with)瞎混；
Get to work. Don’t mess around. 赶快工作，别瞎搅和。
snob 势利眼
sneak in, sneak out 偷偷溜进去，溜出来 sneakers 运动鞋
She is such a brown-nose. 她是个马屁精。
This is in way over my head. 对我而言这实在太难了。
I am an exam jitter and I always get a cramp in my stomach. 我是个考试紧张大师，一考试胃就抽筋。
Keep your study (work) on track. 请按进度读书（工作）。
Did you come up with any ideas? 有没有想到什么新的意见？
Don’t get uptight! Take it easy. 别紧张，慢慢来！
Cheese! It tastes like cardboard. 天哪，吃起来味如嚼腊！
Get one’s feet wet. 与中文里的“涉足”或“下海”，寓意相同，表示初尝某事。

I am going to try dancing for the very first time. Just to get my feet wet.

美国总统到底是比尔·克林顿还是威廉·克林顿？吉米·卡特和詹姆斯·卡特是否同一人？根据语言学家William Safire的分析，美国多数政客都喜欢使用昵名代替他们原来的名字，如Bill就是 William的昵称，Jimmy等于James等。

谷歌地图终成Google Maps

Mon, 15 Sep 2008 14:10:52 +0800

google map translation issue,
originally uploaded by Samuel Chen.

谷歌地图(ditu.google.cn)和 google maps (maps.google.com) 终于通了。这样很多有用的功能都能用了，比如图片，wiki，行车，api 等等。

不过还有一点问题，就是中国的地址用英文该怎么查找。已经试过，用中文可以找到，但是英文就不一定了，比如说“西直门”，用xizhimen 还是 xizhi gate? 想查中国地址，您还是先学学中文吧。

倒也瑕不掩玉。

ps，有个链接可以连到ditu.google.cn来查。