银行专家提醒：切勿泄露交易动态码和卡片安全码
当前位置：
&&&广发新闻
关于广发>新闻资讯>新闻动态">
关于广发>新闻资讯>新闻动态">
关于广发>新闻资讯>新闻动态">
关于广发>新闻资讯>新闻动态">
查看各分行地址及联系电话
牡丹江分行
葫芦岛分行
三门峡分行
平顶山分行
哈尔滨分行
乌鲁木齐分行
香港代表处
广发银行 版权所有粤ICP备号热门关键词： |
当前位置： >
HTML5究竟需要多少种视频编码格式
浏览：次 来源：未知
日期： 14:54:55 评论：
&HTML5 的&标签真的很威武，几乎所有的主流浏览器可以直接提供本地的视频播放功能，相对于以前通过 Flash
这种类似&中继&的播放方式，要先进很多。同时也为一些不支持 Flash 播放的移动设备带来的希望。
　　也许，你会因为标签可以支持到的视频种类而感到困惑。嗯，到底为了实现 HTML5的特性，到底要转换多少种编码格式的视频?WebM，Ogg
还是 MP4?那&iPhone 和 Android又需要哪种编码格式?如果我还要提供高、中、低三种码率的视频呢?
　　下面就来看看到底 HTML5 标签的详细情况吧。
　　关于Web 格式
　　目前来说，广泛被浏览器支持的的视频编码格式总共有三种，但是没有一种可以达到通吃所有浏览器的境界。所以对于同一个视频，至少需要两种格式，才能在所有浏览器里播放。
　　首先要选择一个被支持最多的视频格式，那么就是 MP4 + H.264
这个组合了，音频方面则是 AAC 或者 MP3。MP4封装的视频，可以在 Safari、Chrome 和 IE9 里播放(悲剧的是 IE9 只支持 Windows
Vsita 和 Windows7)。同时，这个组合也是你通过 Flash
来作为播放器播放的最好选择了，同时这个组合也可以在很多手持设备上播放，比如iOS、Android、Blackberry、PSP、PS3 等等。在 H.264
编码的时候，可以选择&High Profile&以获得最好的编码质量，或者&Baseline&来应对一些移动设备。
　　除此之外，还有两个组合，WebM + VP8 和 Ogg + Theora + Vorbis 来满足其他的浏览器。WebM
可以在Firefox(4.0+)、Chrome(6.0+)和 Opera(10.60+)中播放;Ogg
可以在Firefox(3.5+)、Chrome(3.0+)和 Opera(10.54+)中播放。
　　那么问题又来了，如果要从中选择一个，是 Ogg 呢，还是 WebM 呢?
　　从我们(Zencoder)来看，WebM 肯定是未来开放式视频格式的领跑者，VP8 比起 Theora
来说，要更加的优秀，而且还有强大的社区作为其后盾，特别是 Google 的支持。
　　反过来看 Ogg，其最大的特点是她支持了 44.64%的浏览器(译者注：这里应该是指浏览器分部率中，可以播放的比例)，而 WebM仅支持
9.35%的浏览器。如果仅着眼于 2010 年 10 月，那么 Ogg 也是一个不错的选择。如果你是为了未来的 1-2年，那么WebM
似乎更有优势一些。
　　推荐：MP4 + WebM 或者 Ogg 其中一种，当然全部都编码出来也可以 ^^。
　　关于移动设备
　　和浏览器的情况一样，在移动设备上也没有一个可以通吃全盘的编码方案。不同的移动设备有着不同的编码标准，甚至比起浏览器领域来说，更加的复杂。不过还是有一些方案可以让你省不少精力的。
　　在这里你可以查看一个完整的移动设备编码列表。
　　1.现在绝大多数的移动设备都支持 MP4/H.264。包括 iOS 系列的产品(iPhone、iPod、iPad、Apple TV等)，绝大多数的
Android 设备，新的黑莓手机。对于这类设备，编码的时候应该选择&Baseline&。在分辨率上，对于 iOS 和Android 设备，选择不高于
640&480 的分辨率即可，对于黑莓系列手机，选择不高于
480&360 的分辨率即可。
　　注意：可以在 iPhone 上播放的这类编码格式，同样也可以在 HTML5(当然仅仅是一部分浏览器)或者
Flash中播放。如果你怕麻烦或者想节省一些转换花费的时间，可以考虑选择在编码的时候，不高于 iOS 系列设备和
Android系列设备的分辨率。如果你不怕麻烦，并且视频在不同的码率上表现差异很大，或者需要在电脑上有更清晰的表现，就多编码出来几个不同的码率吧。
　　2.对于一些老的移动设备，选择 3GP/MPEG4。绝大多数的黑莓手机和一些 Android 的手机，都支持这种格式。同时，3GP 在 iPhone
和 iPod 上都可以播放。
　　3.关于 WebM，现在也许还不是一个好的选择，虽然在一些 Android 的手机上已经可以播放，但是支持还不是很广泛。预计未来 1-2
年会有更多的支持 WebM 格式的手机。
　　推荐：怕麻烦则 MP4 格式，640&480 或者 480&360。不在乎编码时间和存储空间，就应该选择三种 MP4
编码方案(480&360，640&480，720p +&Main profile&)
　　外加一到两种 3GP 格式(320&240 或者 176&144)，可以参考这份日志来获取更加详细的编码参数。
关于多种比特率
　　有可能你在考虑，是不是要为带宽很足的用户准备高比特率的视频，并且为了照顾小带宽的用户，另外再准备一份低比特率的视频呢?如果你的用户已经开始在互联网上观看高清的视频，那么为了迎合这类用户的习惯和用户体验，那么答案则为是。可以考虑提供
2-3种不同比特率或者分辨率的视频来满足使用不同互联网连接方式的用户。比如提供一份 640&360 和一份
的选择。未来我们会更多的讨论这个问题。
　　关于流媒体播放
　　本篇文章不讨论关于流媒体的问题，并且 RTMP(Flash)、Smooth Streaming(Silverlight)、HTTP Live
Streaming(iOS)都要求特殊的视频格式。这已经超出了我们要讨论的范围了。未来将会有相关的文章进行讨论
　　1.最低限度的支持 HTML5，应该选择 MP4 + WebM
或者 Ogg 其中的至少一种，并且使用 Flash 来播放 MP4
以便提供向下兼容支持。
　　2.移动设备方面，H.264/MP4 会让你省心很多，如果可以提供 2-3 种不同分辨率和码率的视频，会大大增加兼容性。
　　以下是关于所有类型的视频编码方案建议，Zencoder 支持以下列出的所有编码格式(广告了&)
　　1.只为能播放
　　HTML5，Flash和移动设备：MP4/H.264，使用&Baseline&编码，480&360 或者 640&480
　　HTML5：WebM 或者 Ogg
　　2.更上一层楼
　　HTML5，Flash：MP4/H.264，&High profile&编码
　　HTML5：WebM
　　HTML5：Ogg
　　移动设备：MP4/H.264，&Baseline profile&编码，分辨率 480&360 或者 640&480
　　3.我要支持所有设备和浏览器
　　HTML5，Flash：MP4/H.264，&High profile&编码
　　HTML5： WebM
　　HTML5：Ogg
　　移动设备：MP4/H.264，&Baseline profile&编码，分辨率选择 480&360 以便提供高兼容性
　　移动设备：MP4/H.264，&Main profile&编码，分辨率
以便支持新的设备(如 iPhone4、iPad 和
　　移动设备：3GP/MPEG4，分辨率320&240 和(或) 177&144 以便支持非智能手机
相关热词搜索：
赞助商链接百度云需要动态验证码是什么意思_百度知道
百度云需要动态验证码是什么意思
我有更好的答案
是在什么情况下需要动态验证码呢？
其他类似问题
为您推荐：
验证码的相关知识
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁验证码主要是防止机器暴力破解。之前的验证码都是以静态为主，现在一些产品开始使用动态方式，增加破解的难度。动态方式以 gif 最为简单可靠。gif 兼容性好，尺寸小。这里分享的就是一种：用 JS 实现 gif 动态验证码的思路。感谢关注。
绘制旋转的文字
计算每个字符出现位置和角度
生成 gif 图片
如何绘制旋转的文字？
了解能用的 API
context.rotate(angle) 使当前坐标系旋转 angle，单位弧度
context.translate(x, y) 使当前坐标系偏移 x, y，单位像素
context.font 设置字体
context.strokeText(text, x, y [, maxWidth ]) 给文本描边
context.fillText(text, x, y [, maxWidth ]) 给文本填充
怎么以文字的中心位置旋转？
void function() {
var x = 100;
var y = 100;
var angle = 1 / 8 * Math.PI;
context.translate(x, y);
context.rotate(angle);
context.strokeText('A', 0, 0);
以文字的左下角为圆心旋转，不符合预期，见下图效果
本打算做一下偏移的计算，一想到要计算文本中心位置貌似还挺复杂。
还是看看其他人怎么做的，通过关键词 canvas rotate text center 找到一点线索。
context.save();
context.translate(newx, newy);
context.rotate(-Math.PI / 2);
context.textAlign = &center&;
context.fillText(&Your Label Here&, labelXposition, 0);
context.restore();
textAlign 是横向对齐，再根据标准找到了一个纵向对齐 textBaseline
void function() {
context.textAlign = 'center'; // &&&&&&& insert
context.textBaseline = 'middle'; // &&&&&&& insert
var x = 100;
var y = 100;
var angle = 1 / 8 * Math.PI;
context.translate(x, y);
context.rotate(angle);
context.strokeText('A', 0, 0);
修改以后，效果符合预期，见下图：
按我的习惯就这种 “常用” 功能就封装成独立函数，方便以后使用。
* 绘制旋转的文字
* @param {CanvasRenderingContext2D} context 上下文
* @param {String} text 文本
* @param {Number} x 中心坐标 x
* @param {Number} y 中心坐标 y
* @param {Number} angle 角度，单位弧度
function rotateText(context, text, x, y, angle) {
if (!context) {
context.save(); // 保存上次的风格设置
context.textAlign = 'center'; // 横向居中
context.textBaseline = 'middle'; // 纵向居中
context.translate(x, y); // 修改坐标系原点
context.rotate(angle); // 旋转
context.strokeText(text, 0, 0); // 绘制文本
context.restore(); // 恢复上次的风格设置
如何计算每个字符出现位置和角度？
背景文字左右平移 + 旋转，生成随机的字符串计算中心坐标就好了
前景文字基本相似，只要上下来回移动和稍微摇摆，这里用的 cos 曲线控制摇摆。
如何生成 gif 图片
生成 gif 有第三方库可以使用 gifjs。
这里要注意的是，gifjs 用到 worker 技术，所以得在 http:// 环境里调试，不能用 file:// 环境
注意：由于添加的是同一个 canvas 对象，所以的是使用 copy 模式，将图像数据保留给每一帧。
gif.addFrame(canvasTemp, { delay: 100, copy: true });
&!doctype html&
&meta charset=&utf-8& /&
border: black 1px solid;
&script src=&../library/gif.js&&&/script&
Key: &input type=&text& maxlength=&8& /& &input type=&button& value=&build& /&
&canvas width=&300& height=&70&&&/canvas&
&img width=&300& height=&70& /&&a download=&captcha.gif&&download...&/a&
* 绘制旋转的文字
* @param {CanvasRenderingContext2D} context 上下文
* @param {String} text 文本
* @param {Number} x 中心坐标 x
* @param {Number} y 中心坐标 y
* @param {Number} angle 角度，单位弧度
function rotateText(context, text, x, y, angle) {
if (!context) {
context.save(); // 保存上次的风格设置
context.textAlign = 'center'; // 横向居中
context.textBaseline = 'middle'; // 纵向居中
context.translate(x, y); // 修改坐标系原点
context.rotate(angle); // 旋转
context.strokeText(text, 0, 0); // 绘制文本
context.restore(); // 恢复上次的风格设置
* 随机字符串
* @param{String} chars 字符串
* @param{Number} len 长度
function randomText(chars, len) {
var result = '';
for (var i = 0; i & len; i++) {
result += chars.charAt(parseInt(chars.length * Math.random()));
return result;
void function() {
// @see http://www.w3.org/TR/2dcontext/
var canvas = document.querySelector('canvas');
var context = canvas.getContext('2d');
context.font = '30px Verdana'; // 字体大小和字体名
var lineHeight = 15; // 行高
var backLength = 3;
var backTexts = {};
var backXOffsets = {};
var keyYOffsets = {};
var keyAOffsets = {};
var backSpeed = 10000 + parseInt(100 * Math.random());
var keySpeed = 12000 + parseInt(100 * Math.random());
var key = '';
function init(value) {
key = String(value).toUpperCase();
// 随机备件
for (var i = 0; i & canvas.height / lineHeight; i++) {
backTexts[i] = randomText('ABCDEFGHIJKLMNOPQRST', backLength);
backXOffsets[i] = Math.random() * canvas.width;
for (var i = 0; i & key.length; i++) {
keyYOffsets[i] = Math.random() * lineHeight / 2;
keyAOffsets[i] = 0.05 - Math.random() * 0.1;
function renderBack(now, context, text, y, xOffset) {
var tick = now % backSpeed;
for (var i = 0; i & backLength; i++) {
var t = (xOffset + (tick / backSpeed) * canvas.width +
(canvas.width / backLength) * i) % canvas.width;
rotateText(context, text[i], t, y,
i / backLength * Math.PI * 2 + (tick / backSpeed) * Math.PI * 2);
function render(now, context) {
context.fillStyle = '#FFFFFF';
context.fillRect(0, 0, canvas.width, canvas.height);
context.fillStyle = '#;;
// 绘制背景文字
for (var i = 0; i & canvas.height / lineHeight; i++) {
renderBack(now, context, backTexts[i], lineHeight * i, backXOffsets[i]);
// 绘制 key
var tick = now % keySpeed;
var keyCharWidth = canvas.width / key.length;
for (var i = 0; i & key.length; i++) {
var tx = keyCharWidth + (((canvas.width - keyCharWidth) / key.length) * i) % canvas.width;
var ty = Math.cos(now / 1000) * Math.PI * keyYOffsets[i];
rotateText(context, key[i], tx,
canvas.height / 2 - ty, Math.cos(now / 1000) * Math.PI * 0.1 + keyAOffsets[i]);
init('zswang');
setInterval(function() {
render(Number(new Date), context);
document.querySelector('input[type=text]').addEventListener('input', function() {
init(this.value);
document.querySelector('input[type=button]').addEventListener('click', function() {
var self = this;
self.disabled = true;
var gif = new GIF({
repeat: 0,
workers: 2,
quality: 10,
workerScript: '../library/gif.worker.js'
// 生成 gif 图片
var canvasTemp = document.createElement('canvas');
canvasTemp.width = canvas.width;
canvasTemp.height = canvas.height;
var context = canvasTemp.getContext('2d');
context.font = '30px Verdana'; // 字体大小和字体名
context.textAlign = 'center';
for (var i = 0; i & 5000; i += 100) {
render(i, context);
gif.addFrame(canvasTemp, { delay: 100, copy: true });
gif.on('finished', function(blob) {
var url = URL.createObjectURL(blob);
document.querySelector('img').src = url;
document.querySelector('a').href = url;
self.disabled = false;
gif.render();
功能比较简单，也写得比较简单，仅供参考。如果要应用到实战，还有很多细节要考虑
gif 创建的过程必然得放到后端完成，否则 兼容性、性能、安全性 都是问题（这块和传统的验证过程并无区别）。
缓存（背景效果可以重复利用一段时间）。
图片大小需要优化，目前是 200K（通过调整帧率和压缩比）。
提供方便的调用接口（模块化）。
作者： - 站在巨人的肩上也要成为巨人的一部分