无需申请自动送彩金68_白菜送彩金网站大全[无需申请秒送彩金]
做最好的网站
来自 无需申请自动 2019-09-21 11:34 的文章
当前位置: 无需申请自动送彩金68 > 无需申请自动 > 正文

使用Canvas实时处理Video

HTML5:使用Canvas实时处理Video

2015/09/11 · HTML5 · Canvas

本文由 伯乐在线 - cucr 翻译,唐尤华 校稿。未经许可,禁止转载!
英文出处:mozilla。欢迎加入翻译组。

结合HTML5下的videocanvas的功能,你可以实时处理视频数据,为正在播放的视频添加各种各样的视觉效果。本教程演示如何使用JavaScript代码实现chroma-keying特效(也被称为“绿色屏幕效应”)。

请看这个实例.

细说 Data URI

2015/08/27 · HTML5 · URI

原文出处: 李靖(@Barret李靖)   

Data URL 早在 1995 年就被提出,那个时候有很多个版本的 Data URL Schema 定义陆续出现在 VRML 之中,随后不久,其中的一个版本被提上了议案——将它做个一个嵌入式的资源放置在 HTML 语言之中。从 RFC 文档定稿的时间来看(1998年),它是一个很受欢迎的发明。

Data URIs 定义的内容可以作为小文件被插入到其他文档之中。URI 是 uniform resource identifier 的缩写,它定义了接受内容的协议以及附带的相关内容,如果附带的相关内容是一个地址,那么此时的 URI 也是一个 URL (uniform resource locator),如:

ftp://10.1.1.10/path/to/filename.ext

1
2
ftp://10.1.1.10/path/to/filename.ext
http://example.com/source/id

协议后面的内容,可以告诉客户端一个准确下载资源的地址,而 URI 并不一定包含一个地址信息,如(demo):

data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub//ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcppV0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7

1
data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub//ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcppV0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7

其协议为 data,并告诉客户端将这个内容作为 image/gif 格式来解析,需要解析的内容使用的是 base64 编码。它直接包含了内容但并没有一个确定的资源地址。

图片 1

Twitter的”fave”动画

2015/05/12 · HTML5 · Twitter, 动画

本文由 伯乐在线 - 刘健超-J.c 翻译,胡屹 校稿。未经许可,禁止转载!
英文出处:cssanimation.rocks。欢迎加入翻译组。

文档内容

本文使用的XHTML文档如下所示。

XHTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "; <html xmlns="; <head> <style> body { background: black; color:#CCCCCC; } #c2 { background-image: url(foo.png); background-repeat: no-repeat; } div { float: left; border :1px solid #444444; padding:10px; margin: 10px; background:#3B3B3B; } </style> <script type="text/javascript;version=1.8" src="main.js"></script> </head> <body onload="processor.doLoad()"> <div> <video id="video" src="video.ogv" controls="true"/> </div> <div> <canvas id="c1" width="160" height="96"/> <canvas id="c2" width="160" height="96"/> </div> </body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <style>
      body {
        background: black;
        color:#CCCCCC;
      }
      #c2 {
        background-image: url(foo.png);
        background-repeat: no-repeat;
      }
      div {
        float: left;
        border :1px solid #444444;
        padding:10px;
        margin: 10px;
        background:#3B3B3B;
      }
    </style>
    <script type="text/javascript;version=1.8" src="main.js"></script>
  </head>
 
  <body onload="processor.doLoad()">
    <div>
      <video id="video" src="video.ogv" controls="true"/>
    </div>
    <div>
      <canvas id="c1" width="160" height="96"/>
      <canvas id="c2" width="160" height="96"/>
    </div>
  </body>
</html>

以上代码关键部分如下:

1.创建了两个canvas元素,ID分别为c1和c2。c1用于显示当前帧的原始视频,c2是用来显示执行chroma-keying特效后的视频;c2预加载了一张静态图片,将用来取代视频中的背景色部分。
2.JavaScript代码从main.js文件导入;这段脚本使用JavaScript 1.8的特性,所以在导入脚本时,第22行中指定了版本。
3.当网页加载时,main.js中的processor.doLoad()方法会运行。

☞ 格式

Data URI 的格式十分简单,如下所示:

  • 第一部分是 data: 协议头,它标识这个内容为一个 data URI 资源。
  • 第二部分是 MIME 类型,表示这串内容的展现方式,比如:text/plain,则以文本类型展示,image/jpeg,以 jpeg 图片形式展示,同样,客户端也会以这个 MIME 类型来解析数据。
  • 第三部分是编码设置,默认编码是 charset=US-ASCII, 即数据部分的每个字符都会自动编码为 %xx,关于编码的测试,可以在浏览器地址框输入分别输入下面两串内容,查看效果:

// output: ä½ å¥½ -> 使用默认的编码展示,故乱码 data:text/html,你好 // output: 你好 -> 使用 UTF-8 展示 data:text/html;charset=UTF-8,你好 // output: 浣犲ソ -> 使用 gbk 展示(浏览器默认编码 UTF-8,故乱码) data:text/html;charset=gbk,你好 // output: 你好 -> UTF-8 编码,内容先使用 base64 解码,然后展示 data:text/html;charset=UTF-8;base64,5L2g5aW9

1
2
3
4
5
6
7
8
// output: ä½ å¥½ -> 使用默认的编码展示,故乱码
data:text/html,你好  
// output: 你好 -> 使用 UTF-8 展示
data:text/html;charset=UTF-8,你好
// output: 浣犲ソ -> 使用 gbk 展示(浏览器默认编码 UTF-8,故乱码)
data:text/html;charset=gbk,你好
// output: 你好 -> UTF-8 编码,内容先使用 base64 解码,然后展示
data:text/html;charset=UTF-8;base64,5L2g5aW9
  • 第四部分是 base64 编码设定,这是一个可选项,base64 编码中仅包含 0-9,a-z,A-Z, ,/,=,其中 = 是用来编码补白的。
  • 最后一部分为这个 Data URI 承载的内容,它可以是纯文本编写的内容,也可以是经过 base64编码 的内容。

很多时候我们使用 data URI 来呈现一些较长的内容,如一串二进制数据编码、图片等,采用 base64 编码可以让内容变得更加简短。而对图片来说,在 gzip 压缩之后,base64 图片实际上比原图 gzip 压缩要大,体积增加大约为三分之一,所以使用的时候需要权衡。

Twitter的“fave” 动画

最近 Twitter 通过引入一段新的动画重新设计了“fave”按钮(也叫“fav”)。这段动画并不依赖 CSS transition,而是由一系列图片组成的。下面展示如何用 CSS 的 animation-timing-function 属性中的 steps 时序函数(timing function)重新制作这段动画。

JavaScript代码

main.js中的JS代码包含三个方法。

☞ 兼容性

由于出现时间较早,目前主流的浏览器基本都支持 data URI:

  • Firefox 2
  • Opera 7.2
  • Chrome (所有版本)
  • Safari (所有版本)
  • Internet Explorer 8

但是部分浏览器对 data URI 的使用存在限制:

  • 长度限制,长度超长,在一些应用下会导致内存溢出,程序崩溃

Opera 下限制为 4100 个字符,目前已经去掉了这个限制 IE 8 下限制为 32,768 个字符(32kb),IE9 之后移除了这个限制

1
2
Opera 下限制为 4100 个字符,目前已经去掉了这个限制
IE 8 下限制为 32,768 个字符(32kb),IE9 之后移除了这个限制
  • 在 IE 下,data URI 只允许被用到如下地方:
    • object (images only)
    • img、input type=image、link
    • CSS 中允许使用 URL 声明的地方,如 background
  • 在 IE 下,Data URI 的内容必须是经过编码转换的,如 “#”、”%”、非 US-ASCII 字符、多字节字符等,必须经过编码转换

☞ 低版本IE的解决之道 – MHTML

MHTML 就是 MIME HTML,是 “Multipurpose Internet Mail Extensions HyperText Markup Language” 的简称,它就像一个带着附件的邮件一般,如下所示:

/** FilePath: */ /*!@ignore Content-Type: multipart/related; boundary="_ANY_SEPARATOR" --_ANY_SEPARATOR Content-Location:myidBackground Content-Transfer-Encoding:base64 iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg== --_ANY_SEPARATOR-- */ .myid { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="); *background-image: url(mhtml:); }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/** FilePath: http://example.com/test.css */
/*!@ignore
Content-Type: multipart/related; boundary="_ANY_SEPARATOR"
 
--_ANY_SEPARATOR
Content-Location:myidBackground
Content-Transfer-Encoding:base64
 
iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==
--_ANY_SEPARATOR--
*/
 
.myid {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==");
  *background-image: url(mhtml:http://example.com/test.css!myidBackground);
}

上方的一串注释就像是一个附件,这个附件内容是一个名叫 myidBackground 的 base64 编码图片,在一个 class 叫做 myid 的 css 中用到了它。这里有几点需要注意:

  • _ANY_SEPARATOR 可以是任意内容
  • 在”附件”结束位置需要加上结束符 _ANY_SEPARATOR,否则在 Vista 和 Win7 的 IE7 中会出错。
  • 附件代码注意不要被压缩工具给干掉了

这里存在一个坑:部分系统兼容模式下的 IE8 也认识 css 中的 hack 符号 *,但是不支持 mhtml,所以上面的内容不会生效。处理方案估计就只有使用 IE 的条件注释了。

运动产生的错觉

这段动画的效果类似于观看古老的西洋镜,该装置呈现的是一系列连续的围绕着圆筒的插画。在下面的示例中,我们不使用圆筒,而是在某个元素内部呈现一系列图片。

初始化chroma-key

doLoad()方法在XHTML文档初始加载时调用。这个方法的作用是为chroma-key处理代码准备所需的变量,设置一个事件侦听器,当用户开始播放视频时我们能检测到。

JavaScript

doLoad: function() { this.video = document.getElementById("video"); this.c1 = document.getElementById("c1"); this.ctx1 = this.c1.getContext("2d"); this.c2 = document.getElementById("c2"); this.ctx2 = this.c2.getContext("2d"); let self = this; this.video.addEventListener("play", function() { self.width = self.video.videoWidth / 2; self.height = self.video.videoHeight / 2; self.timerCallback(); }, false); },

1
2
3
4
5
6
7
8
9
10
11
12
13
doLoad: function() {
    this.video = document.getElementById("video");
    this.c1 = document.getElementById("c1");
    this.ctx1 = this.c1.getContext("2d");
    this.c2 = document.getElementById("c2");
    this.ctx2 = this.c2.getContext("2d");
    let self = this;
    this.video.addEventListener("play", function() {
        self.width = self.video.videoWidth / 2;
        self.height = self.video.videoHeight / 2;
        self.timerCallback();
      }, false);
  },

这段代码获取XHTML文档中video元素和两个canvas元素的引用,还获取了两个canvas的图形上下文的引用。这些将在我们实现chroma-keying特效时使用。

addEventListener()监听video元素,当用户按下视频上的播放按钮时被调用。为了应对用户回放,这段代码获取视频的宽度和高度,并且减半(我们将在执行chroma-keying效果时将视频的大小减半),然后调用timerCallback()方法来启动视频捕捉和视觉效果计算。

☞ HTTPS 下的安全提示

HTTPS 打开页面,当在 IE6、7 下使用 data URIs 时,会看到如下提醒:

图片 2

MS 的解释是:

您正在查看的网站是个安全网站。它使用了 SSL (安全套接字层)或 PCT(保密通讯技术)这样的安全协议来确保您所收发信息的安全性。
当站点使用安全协议时,您提供的信息例如姓名或信用卡号码等都经过加密,其他人无法读取。然而,这个网页同时包含未使用该安全协议的项目

很明显,IE 嗅到了”未使用安全协议的项目”。

浏览器在解析到一个 URI 的时候,会首先判断协议头,如果是以 http(s) 开头,它便会建立一个网络链接下载资源,如果它发现协议头为 data:,便会将其作为一个 Data URI 资源进行解析。

图片 3

但是从 chrome 的瀑布流,我们可以做这样的猜测:

图中每个 Data URI 都发起了请求,不过状态都是 data(from cache),禁用缓存之后,依然如此。所以可以断定,浏览器在下载源码解析成 DOM 的时候,会将 Data URI 的资源解析出来,并缓存在本地,最后 Data URI 每个对应位置都会发起一次请求,只是这个请求还未建立链接,就被发现存在缓存的浏览器给拍死了。

示例

把鼠标悬停在星星上就可以看到动画效果(请到原文查看动画效果——译者注)。

在本示例中,我们将从制作一系列能组成动画的图片开始。在这里,我们使用来自 Twitter 的“fave”图标动画的部分图片集:

图片 4

为了能让这些帧动起来,我们需要把它们放置在一排上。在这个文件中,这些帧已经排列在一排上了,这意味着我们可以通过设置背景位置(background-position)属性使背景从第一帧过渡到最后一帧。

图片 5

本文由无需申请自动送彩金68发布于无需申请自动,转载请注明出处:使用Canvas实时处理Video

关键词: