我现在在波士顿,去了麻省理工学院 给客人讲课HTML5 多媒体是Mozilla系列讲座的一部分,该系列讲座的主题是一场游戏比赛。这是我讲过的幻灯片和一些笔记。
你可以在任何网站上查看“多媒体”HTML5 使设备在这里 (由vid.ly提供)或嵌入:
下载“网上多媒体”asMP4
见幻灯片幻灯片
以下是我所说的注释:
网络多媒体的快速历史
在我们继续前进之前,回想一下我们所做的事情有时是个好主意。这给了我们一个避免重复错误的机会,也让我们有机会记住我们再次面临的问题的解决方案。
一开始,我们有图像是唯一的多媒体元素 在浏览器中。由于连接速度很差,我们必须非常小心使用的格式:
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是唯一允许视频全屏显示的浏览器。其他浏览器制造商决定反对这种选择,以防止人们使用视频进行网络钓鱼。
为了支持所有功能强大的浏览器,你需要提供至少两种格式的视频:
type=“video/mp4”>
type = "视频/ ogg " >
你的浏览器不喜欢HTML5 视频中, 在看电影
archive.org .
使用MP4 作为第一种确保iOS设备播放的格式。确保添加了a类型
属性设置为每个源,否则浏览器将加载每个文件的一小部分以确定类型。
此外,您可以使用媒体
属性为不同的设备提供不同质量的电影。以下示例将高质量视频发送到宽度超过800像素、质量较低的设备(使用时MP4 ):
type=“视频/MP4”
介质=“(最小设备宽度:800px)”>
type=“video/mp4”>
type = "视频/ ogg " >
在看电影 archive.org .
你可以在视频和音频标签中使用的其他属性有:
海报 -在加载之前定义要显示的图片。
高度/宽度 -视频尺寸
环 –自动重新启动视频或音频
预载 (自动/无/元数据)-当设置为汽车
如果可能,浏览器会预加载视频/音频(大多数移动浏览器不会节省带宽,虽然)。当设置为元数据
只加载必要的数据以显示介质的长度并设置正确的尺寸。
控制
由于不同浏览器的控件存在差异,您可能需要创建自己的播放器控件。这很简单。您可以使用以下几种方法:
加载() –加载新媒体。
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 是一回事。使用画布和复制帧从视频到它你可以对视频本身做实时更改,真是太好了。
Remy Sharp的圆形视频演示 展示如何创建一个旋转,包含视频的弹跳圆
Paul Rouget的绿色演示 演示如何使用开放式Web技术模拟绿色屏幕效果。将每一帧复制到画布上并读取RGB 每个像素的值。当它是绿色的时候,只需设置它的不透明度,让视频后面的图片发光。
动态内容注入 由保罗展示了如何分析一个视频,并找到白色部分作为一个嵌入画布的角点。你可以插入其他视频,将动画或图像放到其他视频中。
的跟踪演示 演示如何在视频中检测人体形状和运动
的边缘检测 演示如何检测边缘在一个实时视频使用JavaScript
吓人的声音
正如你所看到的,有很多很酷的实时事情你可以用视频来做。音频在某种程度上不那么性感,因为你可以播放,也可以向后播放(目前只在Safari中工作)。读取音频数据或动态生成声音不是很酷吗?
有一个火狐狸4API 在那里你可以做到。请阅读……的介绍API 或检查音频API 维基 去了解它。
一个很酷的演示API 是HTML5 吉他标签生成器 外面已经有一个图书馆叫sfxr 这可以让你在飞行中创建音频。