我对Serge Jespers今天发表的一篇文章非常失望，Adobe福音传道者窃取内容从来没有比使用HTML5.

我最失望的是标题，我希望有链接诱饵和谷歌果汁。换言之，宣传真的很低劣。

这篇帖子的出发点是好的:有一个开放媒体标准的问题HTML5无法保护高级内容不被下载。没有数字版权管理,没有加密或水印。如果我们想让优质内容出版商跟上潮流，然后我们需要考虑一下。像这样的帖子，加上这个标题，我们甚至很难接触到人们谈论选择。它是FUD以及Adobe作为一家声称支持HTML5应该知道更好。

马上，我确实告诉那些对自己的内容心存疑虑的人使用Flash，因为它对简单的下载有一定程度的保护。如果Adobe的官方发言人继续这样滔滔不绝地发表信息，我会告诉他们使用Silverlight。

认为很容易下载视频的论点HTML5正如你在资料来源中看到的，这就像说在火车站偷报纸很容易，因为他们很容易得到。它是无效的——你可以偷它不是这里的问题，问题是你怎么处理这张纸。你是不是从看台上拿下来不看就去付钱？你当场读了然后又放回去吗？你带着它不付钱就走了吗?或者你看了头条，当你被吸引的时候，你会去付钱吗？你拿着报纸吗？去复印机，复制它，然后再尝试出售这些副本？事实上，要拿到论文是非常容易的，同样地，在网上获取视频也非常容易。

我发现自己经常下载youtube视频，因为我经常出差。在路上(考虑到数据计划和漫游)意味着我没有连接，或者我有一个不稳定的连接，它将电影下载到第3分钟，然后在我的笔记本电脑的风扇旋转时暂停。相反,在家里，当我有了胖连接后，我下载了一些谈话和屏幕广播，并使用VLC.然后我删除它们——或者我在博客上先把它们链接到YouTube上，然后用这种方式做广告。

要下载这些非常受保护的Flash电影，我使用数十项服务，浏览器扩展或应用程序在那里。

允许人们下载电影意味着你得到了更多的观众。如果你让人们跳过去看电影，或者让他们看5分钟的广告，看10秒的电影，你不应该惊讶如果他们使用P2P文件共享或热文件，拉普莱斯克Fileserve,Megaupload和许多其他服务可以在10秒内下载电影，然后在空闲时观看。

识别出什么？YouTube上有成千上万的下载用户，他们为提供容易下载盗版内容的托管服务付费，这一事实本身就意味着对该功能的需求很大。一个能让我高兴到YouTube上的功能，我愿意为此付费。

所以不是妖魔化HTML5作为一个后门，它会让坏人偷走你的好东西，也许现在是时候让优质内容提供商向网络用户开放，并为订阅用户找到一种发布内容预览和完整内容的方法。有很多方法可以赚钱和分享你的产品——但如果你把大部分时间和金钱花在那些看似能给你保护的东西上，但实际上只是一个玻璃罩的话，情况就不一样了。

昨天晚上我去伦敦的霍尔伯恩参加伦敦网络标准选择“混合”活动。

这个地方(酒吧下面的一个房间，有自己的酒吧——赢了!)挤满了人，实际上非常温暖。声音很好（除了可以转动的手持式麦克风吉姆奥唐奈在丛林混音中宣布），人们渴望听到酷的新事物。

我真正喜欢的一件事是，在第一次演讲之前，组织者没有像往常那样感谢赞助商，而是列出了工作机会——这是为你的工作做广告的非常聪明的方式。如果你需要一个伦敦的网络怪人，联系他们！

2016年我们将如何布局网站彼得Gasston

彼得第一个上台做了5分钟的灯光演讲CSS布局模型。他写了一篇标题相同的文章CSS3info2006年，并涵盖了自那以来有所改善的情况(没有多大改善，真的。他的幻灯片是在Slideshare上提供.

彼得做得很好(考虑到这是他第一次公开演讲)，涵盖了CSS布局。我们现在用的，像Floats一样，绝对定位或javascript（Masonry.js)以及接下来会发生什么:

• 柔性箱,很有希望，但很快就会改变，并破坏当前的实现小杯的flexbox简介和保罗爱尔兰的flexbox文章HTML5岩石)
• 模板布局,可以使用javascript多段填充
• 网格定位

彼得正确地宣称布局现在是CSS以及浏览器厂商需要解决的问题。

如何写作jQueryJavaScript那不烂-罗斯Bruniges

罗斯是英国的常客，总的来说是个好人。其中一个声音很大，饮酒，但也沉默的类型，没有得到应有的荣誉，他帮助网络标准摇滚城市。他有一种特殊的方式，这也表明他付出了迷你猪肉派作为奖品的问题!Ross做了一个很好的演讲来提醒大家，如果您希望您的代码能够正常工作，并被其他开发人员接管，而不需要点名，那么JavaScript开发中的最佳实践是什么。的他的邮局有幻灯片和链接.

第一点是整理你的东西，就像你将要移交给其他开发人员一样。

杰斯林特在他的名单上，首先，最重要的是，它可以帮助您发现代码中的简单问题，像：

• 分号插入可能导致错误返回值(是的，{不应该在JS的新行，对不起）


• double equals而不是triple equals–您应该检查类型和值

我个人使用JSTools Textmate软件捆绑当我保存它的时候，它会轻拂我的JS——非常简单的提醒我做正确的事情。

罗斯接着解释说，jquery中的长链很诱人，但也很难读取和调试。使用的一个技巧是在完全停止时拆分链条，并在链条前面插入新行和制表符。

然后他继续解释在JavaScript中使用模式是个好主意，尤其是显示模块的模式（我能说什么？这个人很有品味)，而且很卖弄奥斯马尼的自由基本JavaScript设计模式电子书。

亚格尼-你不需要它-是下一个，在它的后面，提醒你要创造更小的，恰当命名的函数可以很好地完成一项任务，而不是所有包含怪物的方法。这也可以通过查看函数来实现，检测重复的任务并将它们移到自己的帮助器方法中。

定制事件是下一个伟大的提示，我只能同意，没有什么比将您的功能与源代码分离以及允许其他开发人员扩展您的小部件更好的了。

注释代码是Ross的癖好之一，他赞扬了注释代码的实用性JSDoc和文档驱动设计,如所描述的弗朗西丝·贝里曼以今年的24种方式。

然后我们继续讨论性能，没有什么比过早地优化和在考虑性能测试时忘记旧浏览器更糟糕的了。

对于初学者来说，在sizzle引擎从右到左解析字符串时，用jQuery编写好的选择器非常重要。这意味着$ (' # foo div ')使IE读入所有DIV元素,在它们之间循环并检查哪些具有身份证件喷火而不是做一个GETeleMyByID然后一个getElementsByTagName达到同样的效果。

同样，重要的是缓存变量的结果，以避免IE一遍又一遍地这样做，并在元素找不到时返回false，因为jQuery非常坚定地试图找到它们。

事件的代表团是菜单上的下一件大事吗？我再也不能同意了——它非常优雅，使您的JS独立于HTML的变化。拥有一个事件监听器比使用每一个()以便在整个文档中应用大量的方法。Ross提到的一个问题是jQuery生活()一直到文档杠杆委托()允许您定义一个类似“仅在此div”。有一个布兰登·艾伦的博客有很好的概述.

回流和重新喷漆问题接下来在表演菜单上，这在本质上意味着你不应该碰DOM太多反而造成太长HTML字符串并在显示它们之前将它们注入隐藏的元素中。

可访问性是另一个话题，是罗斯提醒我们的吗CSS悬停样式也应该得到焦点和模糊样式，而不是使用悬停，你应该使用.bind (mouseenter聚焦)和毛发模糊在jQuery。

另一个提醒是，无效的标记是无效的标记——即使您使用javascript添加它，并且您应该通过使用除了隐藏的窗体字段之外，还有tabindex和focus或者更好的是咏叹调居住区.

下一件事是不要忘记边的情况，因为当它们可能出错时，事情就会出错。这意味着使用$AXAX（）而不是$ .getJSON()因为它允许您定义超时和错误情况(并且不会因为回调参数而破坏缓存)。

罗斯最后的观点是HTML5注意，小心HTML5SHIV因为这意味着你要做这项工作CSS应该使用javascript。相反，使用div每个新语义元素周围都有一个类。

总之，罗斯做得很好，我希望他能激励你们中的一些人更深入地挖掘（因此我的笔记和更多链接也在这里）。

科内尔-莱辛斯基-超文本传输协议

在愉快的饮料和谈话之前的最后一次谈话中，Kornel改变了一点步伐，也将重点从前端技术转移到了服务器上，甚至进一步转移到了Web本身的基础设施上。

他详细地谈到：

• 哑剧演员在Web上提供文件时出现类型问题
• 在服务器上发送报头如何比使用a更有意义元标签
• 如何使用附加:附件
• 虫子在工业工程-特别是关于缓存和文件名属性
• 如何伪装哑剧演员类型似乎是一个快速的解决方案，但会进一步咬我们的线
• html vs application / xhtml + xml

我不太确定观众中有多少人理解这是怎么回事，但我对研究和冷静、严肃的演讲风格印象深刻。对网站上的文件进行错误编码是一个大问题，可能会导致或破坏您的网站，因为最终您希望以用户希望的方式向他们显示文件。

总结

总之，这是一个美好的夜晚，我期待着这个小组的下一次会议。我的建议是把这个结构稍微改成一个大谈话和几次闪电谈话，让更多的人有机会展示他们在做什么。这是一次很好的聚会，可以让你第一次有演讲的经验，听众也很有知识和同情心。

前段时间，我发布了一个演示缩放和旋转视频HTML5和CSS3.现在我在Mozilla上写了一篇详细的博文旋转和缩放视频的技术.最后的结果是这个玩家：

的源在GitHub上可用你可以在这里看到它的作用.现在前往Mozilla获取所有信息:)

你们中的一些人可能会回忆起网络上大公司失利的三个原因张贴并要求我提供更多的细节，一些事情，需要解决和如何做到这一点。

我很自豪地宣布读写网发表了一篇由我署名的客座文章山谷缺乏灵活性，非天才.我在其中讨论:

• 过时的雇佣实践
• 专注于本地而不是像一家全球性公司
• “Rockstar开发者”作为产品救世主的神话
• 启动采集失败
• 面试的做法会让求职者很恼火，给人的第一印象很差。
• 授权你的员工为你雇佣而不是代替他们

把这些都写下来感觉很好，希望对你们有所帮助，了。

我现在在波士顿，去了麻省理工学院给客人讲课HTML5多媒体是Mozilla系列讲座的一部分，该系列讲座的主题是一场游戏比赛。这是我讲过的幻灯片和一些笔记。

你可以在任何网站上查看“多媒体”HTML5使设备在这里(由vid.ly提供)或嵌入:

见幻灯片幻灯片

以下是我所说的注释：

网络多媒体的快速历史

在我们继续前进之前，回想一下我们所做的事情有时是个好主意。这给了我们一个避免重复错误的机会，也让我们有机会记住我们再次面临的问题的解决方案。

一开始,我们有图像是唯一的多媒体元素在浏览器中。由于连接速度很差，我们必须非常小心使用的格式:

• JPEG图像有数百万种颜色，但当你把它们缩小到文件大小时，它们就会丢失。当人们将文本截图另存为JPEG-文本看起来模糊，难以阅读。
• GIF图像有固定数量的256种颜色，有透明像素，可以是动画图像。将照片另存为GIF导致抖动以模拟更多的颜色和更大的文件。
• PNG是第一个开放的格式和一个良好的中间地带-虽然没有动画和IE没有得到正确的透明度
• WBMP移动设备是否有一种特殊的2色格式WML页

作为连接速度不好我们提出了一些非常聪明的图像格式和浏览器属性：

• 进步JPG首先显示图像的高度手工化和小(在filesize中)版本，并在下载过程中提高其质量
• 交错的GIF载入GIF逐行-第一行1，三，5,7，然后2，4，6等等——这样你就可以在图像加载时看到它是关于什么的。
• 网景公司了lowsrc属性，该属性允许您定义一个较小的图像，首先显示该图像，然后逐渐被完整的胖图像覆盖。

我们与gif动画后来和JavaScript动画-后者给我们控制动画，但也需要JS，不常使用或打开的。

网站上的音频大多是MIDI背景声音-谢天谢地，这一切都结束了。

接下来,我们使用用于高保真动画的Java applet他们给了许多网站在贺曼礼品盒里找到的东西的魅力。

然后RealPlayer出现了。现在不在任何人的“拥有”名单上了，任何一个真正的玩家在它的时代都是令人敬畏的：SMIL支持,流能力,支持所有平台和很好的压缩。可惜的是，玩家和编码器都被关闭了，你必须支付所有费用。

其他允许嵌入视频的播放器是Quicktime，Windows Media Player，Shockwave甚至AdobeAcrobat都有一些图像转换选项。其他插件，如iPix，允许放大到图像和VRML在浏览器中创建3D世界的想法。

不过，他们都有同样的问题——他们都是插件，因此与浏览器格格不入。你需要不断地升级它们，它们使浏览器不太稳定，并且无法与页面的其他部分进行交互。

另一个问题是安全性——很多浏览器的安全漏洞实际上是通过攻击插件来实现的，因为它们比JavaScript本身更深入地访问操作系统。

过了一会儿，Flash成为人们在网络多媒体中使用的主要插件。它具有强大的能力，一套很好的编辑器和库，可以让你显示，更重要的是，保护你的视频不被下载。现在数字版权管理将是使用Flash电影而不是本地电影的主要原因之一HTML5.

与Flash烦恼

我最近在flash中发现的第一件事就是性能不好。在我的MacBookAir上，观看几段YouTube视频会触发处理器的粉丝——一些HTML5视频不行。原因是Flash是一个适用于所有音频的解决方案，视频中,动画和最近的3D动画。

Air和Flex允许您使用外部编辑器构建电影，大多数情况下，您仍然使用Flash builder来创建文件，而不是使用编辑器来构建页面的其余部分。

不管闪光灯有多酷，它还是一个外星人，浏览器中的黑箱，无法从外部进行操作。首先，这意味着不好的可访问性:

• 你不能用键盘在其他浏览器上访问Flash视频工业工程-不考虑视频中的键盘控制
• 电影中的键盘访问需要由开发者添加。
• 虽然音频和视频是帮助有学习困难的人的强大工具，但由于上述两点，很难让他们获得它们必威体育下载

让Flash与页面其余部分对话的方法是为Flash控件提供api。例如YouTube就有API这允许您编写自己的播放器控件，可以通过键盘访问。我用过这个API过去要建设简易YouTube.但有些事情我做不到——比如以一种方便的方式提供字幕和字幕。

HTML5音频和视频

这就是HTML5它自带的音频和视频元素不是在黑盒中，而是浏览器的一部分，你可以像操作文本块一样操作它们，元素或图像是。本机多媒体控件有许多优点:

• 更好的可达性
• 更好的性能——元素可以很好地完成一件事情，而不是成为一个一网打尽的解决方案。
• 简单得多API
• 允许使用样式和套印格式-在Internet Explorer中使用其他元素覆盖Flash电影始终是一个难题
• 查看源代码“可入侵”–可以在普通情况下进行更改HTML而不需要在另一个编辑器和编译中进行更改

采取比如奥普拉的新网站-把鼠标悬停在大图片上可以看到视频。这是HTML5从而便于视频的维护细胞质雄性不育没有整个页面是一个Flash电影。它的质量和文件大小也比动画赠品要高得多。

痛苦的事情——编解码器和转换

当然不是所有的都是阳光，小兔子和雏菊HTML5其原因是音像制品的版权和知识产权。使用闭路视频和音频编码的开放系统无法工作。视频和音频被转换成更小的，可流格式在它进入web之前。不存在诸如“AVI文件”或“MOV文件”之类的东西——这些是带有音频和视频流的容器格式，它们都使用不同的编解码器使其变小。问题是，这些系统都有版权，您需要支付金钱来创建这些格式的文件。这就是为什么我们需要HTML5.

我们现在有H.264或者MP4文件是打开的，但我们可能需要支付他们以后，我们有开放的Ogg Theora文件和谷歌发布VP8或者WebM有一个新的，高质量和小文件大小格式的网页。我们现在的工作是将数码相机制作的专有格式视频转换成这些开放格式。有很多工具可以做到这一点:

• 无畏是一个成熟的音频编辑器，允许您保存OGG音频文件。
• 网络工具允许您以WebM格式创建文件。
• 埃沃姆是另一个编码器。
• VLC不仅是一个很棒的视频播放器，还允许录制和编码。


• Ogg转换,消防队员和锡焦格都是OGG转换器。


• 对于麦克来说米罗视频转换器这是免费的开放源代码，可以轻松地将视频转换为WebM。
• MPEG流夹将视频转换为MP4适用于Mac和Windows。
• FFMPEG是一个命令行工具，上面的大多数解决方案都以某种方式使用。

将视频转换为所有必要格式的一个非常简单的方法是将其驻留在主机上归档文件.如果你的视频获得了Creative Commons archive.org的授权，那么它不仅可以提供完整的托管(YouTube只允许15-30分钟)，还可以将视频转换成OGG和MP4自动为你。

嵌入

嵌入HTML5视频到你的文件是难以置信的容易:

当浏览器不支持时，将显示在音频或视频中的任何内容——在本例中不是很有用的消息，但很重要。通常情况下，您可以使用此功能提供下载音频或视频文件的链接或闪存回退（如果您确实必须这样做的话）。

马上，但这没有任何作用。如果你想显示一个用户可以控制的视频(跳转到另一个时间，改变音量，播放我们的暂停视频)所有你需要做的是添加一个控制属性：

有了它，你就有了一个可以通过鼠标或键盘控制的视频——就这么简单。不同浏览器的控件看起来不同，有些控件具有其他控件不具备的功能。例如，Safari是唯一允许视频全屏显示的浏览器。其他浏览器制造商决定反对这种选择，以防止人们使用视频进行网络钓鱼。

为了支持所有功能强大的浏览器，你需要提供至少两种格式的视频:

使用MP4作为第一种确保iOS设备播放的格式。确保添加了a类型属性设置为每个源，否则浏览器将加载每个文件的一小部分以确定类型。

此外，您可以使用媒体属性为不同的设备提供不同质量的电影。以下示例将高质量视频发送到宽度超过800像素、质量较低的设备（使用时MP4）：

你可以在视频和音频标签中使用的其他属性有:

• 海报-在加载之前定义要显示的图片。
• 高度/宽度-视频尺寸
• 环–自动重新启动视频或音频
• 预载(自动/无/元数据)-当设置为汽车如果可能，浏览器会预加载视频/音频（大多数移动浏览器不会节省带宽，虽然)。当设置为元数据只加载必要的数据以显示介质的长度并设置正确的尺寸。

控制

由于不同浏览器的控件存在差异，您可能需要创建自己的播放器控件。这很简单。您可以使用以下几种方法：

• 加载（）–加载新媒体。
• canPlayType(类型)——返回可能,也许和“”(真的!)
• 打()–播放电影
• 暂停（）–暂停电影。
• addtrack（标签、种类、语言）——字幕

你也有一些属性来控制和读取视频/音频文件的不同部分的状态:

• 视频详细信息
  • 宽度
  • 高度
  • 电视录像
  • 视频高度
  • 海报
• 控制
  • 控制
  • 体积
  • 柔和的
• 磁道
  • 磁道
• 网络状态
  • src
  • currentSrc
  • 网络状态
  • 预载
  • 缓冲的
• 就绪状态
  • 请求处理
  • 寻求
• 回放状态
  • 当前时间
  • 开始时间
  • 期间
  • 停顿了一下
  • 默认播放速率
  • 回放率
  • 玩
  • 可寻找的
  • 结束了
  • 播放
  • 环

这是一件很好玩的事。例如，要为音频文件创建一个简单的播放按钮，您可能在页面中有一个带有class按钮的button元素。为了让它发挥作用，你需要做的就是:

var audio=document.getElementsByTagname（'audio'）[0]；
var play=document.getElementsByClassName（'play'）[0]；
play.addEventListener(“点击”,函数(e){
var t=e.目标；
如果(audio.paused){
音频播放（）；
t.innerhtml='暂停'；
其他} {
音频。暂停（）；
t.innerhtml='播放'；
}

	
e.preventDefault（）；
});

你检查是否停顿是真的，呼唤打()当它是，不然你叫暂停（）.改变内层HTML你按下这个按钮就可以关机。

然而，仅仅检查对象的状态是不安全的。实际侦听音频/视频对象触发的事件更有意义。还有很多有趣的事情要听：

• loadstart
• 进步
• 暂停
• 中止
• 错误
• 清空
• 停滞不前
• 玩
• 暂停
• loadedmetadata
• loadeddate
• 等待
• 玩
• canplay
• 播放播放
• 寻求
• 提议
• 时间更新
• 结束了
• ratechange

利用这些事件，播放器按钮代码略有变化:

video.addEventListener（'播放'，游戏事件，假);
video.addEventListener(“暂停”,暂停，假);
video.addEventListener（“结束”，函数(){
这是PAUSER（）；
}假);
函数playEvent(){
play.innerhtml='暂停'；
}

	
函数pausedEvent(){
play.innerhtml='播放'；
}
	
play.onclick=函数（）
if（video.ended）video.currentTime=0；}
如果（视频，暂停）
视频播放（）；
其他} {
视频，暂停（）；
}
	
};

那里没有魔法。

如果您想查看所有活动中的事件和属性(更重要的是查看浏览器是否支持它们)，请查看媒体事件演示页W3C网站.

同步视频和其他效果的一个非常好的技巧是使用当前时间财产。其中一个例子是印第安纳精神演示版在这里，我们将谷歌地图动画与视频同步。主要的问题是时间更新事件经常触发，但不一定每秒钟都触发一次。因此，您需要使用PARSETIN（）.你可以看到它的作用在视频演示中:

window.addEventListener（'加载'，
函数（）
var stage=document.getElementByID（“stage”）；
var log = document.getElementById(' logger');
var seqlog = document.getElementById(' loggersequence ');
var v = document.getElementsByTagName(' video')[0];
但= document.createElement(“按钮”);
but.innerHTML = ‘Click to see Lindbergh's flight';
stage.appendChild(但是);
但是.addEventListener（'click'，函数（e）
v.play();
e.preventDefault（）；
}，假）；
var现在= 0;
v.addEventListener（'TimeUpdate'，函数（o）
log.innerhtml=v.currentTime；
var full = parseInt(v.currentTime);
if(full >= now) {
seqlog.innerhtml=现在；
现在=现在+ 1；
}


	
}，假）；
}
假);

转换

真正的力量HTML5原生视频是指你可以看到转换页面中的视频元素是多么容易。以下是一些演示：

• 转换视频演示如何简单地创建一个播放器，使您可以放大视频和旋转它使用CSS转换
• Paul Rouget的圆形视频演示显示如何在中创建播放/暂停按钮静止无功发生器,灰度化视频并使用CSS转换
• 保罗的视频混搭演示展示如何应用静止无功发生器像高斯模糊这样的滤镜，遮罩及使用方法CSS转换为一个运行的视频

只需检查这些演示上的源代码，看看它们是如何完成的——开放网络的强大功能。

实时变化

添加过滤器并用CSS是一回事。使用画布和复制帧从视频到它你可以对视频本身做实时更改，真是太好了。

• Remy Sharp的圆形视频演示展示如何创建一个旋转，包含视频的弹跳圆
• Paul Rouget的绿色演示演示如何使用开放式Web技术模拟绿色屏幕效果。将每一帧复制到画布上并读取RGB每个像素的值。当它是绿色的时候，只需设置它的不透明度，让视频后面的图片发光。
• 动态内容注入由保罗展示了如何分析一个视频，并找到白色部分作为一个嵌入画布的角点。你可以插入其他视频，将动画或图像放到其他视频中。
• 的跟踪演示演示如何在视频中检测人体形状和运动
• 的边缘检测演示如何检测边缘在一个实时视频使用JavaScript

吓人的声音

正如你所看到的，有很多很酷的实时事情你可以用视频来做。音频在某种程度上不那么性感，因为你可以播放，也可以向后播放（目前只在Safari中工作）。读取音频数据或动态生成声音不是很酷吗?

有一个火狐狸4API在那里你可以做到。请阅读……的介绍API或检查音频API维基去了解它。

一个很酷的演示API是HTML5吉他标签生成器外面已经有一个图书馆叫sfxr这可以让你在飞行中创建音频。