作者：本文由 Mozilla 贡献者兼 非凡 Open Web 演示 提供者 Paul Rouget 撰写。
从 Firefox 3.5 开始，您可以像嵌入图像一样在网页中嵌入视频。这意味着视频现在是文档的一部分，并最终成为 Open Web 的一等公民。与所有其他元素一样，您可以使用 CSS 和 JavaScript 与之交互。让我们看看这意味着什么……
基础知识
首先，您需要一个要播放的视频。Firefox 支持 Theora 编解码器（点击此处了解音频和视频元素支持的所有媒体格式）。
将视频添加到您的文档
如果浏览器不支持 video 标签，您可能需要添加一些“备用”代码。只需在 video 标签内包含一些 HTML（可能是警告，甚至是一些 Flash）。
这里有一些关于备用机制的更多信息。
HTML 属性
您可以在这里找到所有可用的属性。
一些重要的属性
- autoplay：页面加载后立即播放视频。
- autobuffer：默认情况下（没有此属性），除非您单击播放按钮，否则不会下载视频文件。添加此属性会在页面加载后立即开始下载视频。
- controls：默认情况下（没有此属性），视频不包含任何控件（播放/暂停按钮、音量等）。如果您想要默认控件，请使用此属性。
- height/width：视频的大小
示例
您不必在 HTML5 中为这些属性添加“true”值，但这样做更整洁。如果您不在 XML 文档中，您可以简单地写
JavaScript API
与任何其他 HTML 元素一样，您可以通过文档对象模型 (DOM) 访问视频元素。
var myVideo = document.getElementById("myVideo");
获得视频元素的句柄后，您可以使用 JavaScript API for video。
以下是一些有用方法和属性的简短列表（以及有关音频和视频元素的更多 DOM API）
- play() / pause()：播放和暂停您的视频。
- currentTime：当前播放时间，以秒为单位。您可以更改此值以进行搜索。
- duration：视频的持续时间。
- muted：声音是否静音？
- ended：视频是否已结束？
- paused：视频是否已暂停？
- volume：用于确定音量，以及更改音量。
示例
事件
您知道如何控制视频（播放/暂停、搜索、更改音量等）。您拥有创建自己的控件所需的大部分内容。但是您需要来自视频的一些反馈，为此，让我们看看您可以监听的不同事件
- canplay：视频已准备好播放
- canplaythrough：视频已准备好无中断播放（如果下载速率没有变化）
- load：视频已准备好无中断播放（视频已完全下载）
- ended：视频刚刚结束
- play：视频刚刚开始播放
- pause：视频已被暂停
- seeking：视频正在搜索（可能需要几秒钟）
- seeked：搜索过程刚刚完成
- timeupdate：在视频播放期间，currentTime 会更新。每次 currentTime 更新时，都会触发 timeupdate。
这里是所有事件的完整列表。
例如，您可以跟踪刚刚播放的视频的百分比
function init()
{
var video = document.getElementById("myVideo");
var textbox = document.getElementById("sometext");
video.addEventListener("timeupdate", function() {
textbox.value = Math.round(100 * (video.currentTime / video.duration)) + "%"; }
}
为了演示这一切，这里有一个使用 Video API 的不错的开放式视频播放器。
现在您已经熟悉了 Video API 背后的某些基本概念，让我们真正深入研究视频作为 Open Web 的一部分，将视频引入 CSS、SVG 和 Canvas。
CSS 和 SVG
video 元素是一个 HTML 元素。这意味着您可以使用 CSS 对其进行样式设置。
一个简单的示例：使用 CSS 图像边框规则（Firefox 3.5 中引入的新 CSS 3 特性）。您可以在 Mozilla 开发者维基上查看它是如何工作的。
显然，您可以将其与 video 标签一起使用
我的一个演示使用了这个技巧。
由于 Firefox 3.5 提供了一些新的漂亮 CSS 特性，您可以做一些非常棒的事情。请查看臭名昭著的洗衣机演示，在这个演示中，我让一位尊敬的同事做了一些旋转。
它使用了一些 CSS 规则
以及一些 SVG
由于 video 元素与任何其他 HTML 元素一样，您可以向视频本身添加一些 HTML 内容，就像我在这个演示中所做的那样。如您所见，视频的顶部有一个<div>元素 (position: absolute;)。
休息时间
好吧，我们刚刚看到了我们可以使用 video 元素实现的程度，包括如何控制它以及如何对其进行样式设置。这很好，也很强大。我强烈建议您阅读有关Firefox 3.5 中可用的新 Web 特性 的信息，并思考如何使用这些特性以及 video 元素。
您可以使用 Open Web 的强大功能做很多事情。您可以计算视频的像素。例如，您可以尝试在视频中查找一些形状，跟踪这些形状，并绘制一些作为这些形状附件的内容。这就是我在这里所做的！让我们看看它是如何工作的。
Canvas & 视频
另一个 HTML 5 元素是canvas。使用此元素，您可以绘制位图数据（请参阅canvas 参考，我强烈建议您查看此 canvas 概述）。但您可能不知道的是，您可以复制<img/>元素、<canvas/>元素和<video/>元素的内容。
这对video元素来说是一个非常重要的点。它为您提供了一种方法来处理视频帧的像素值。
您可以在 canvas 中对视频的当前帧进行“截图”。
function screenshot() {
var video = document.getElementById("myVideo");
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
}
您可以首先对 canvas 应用转换（请参阅文档）。您也可以复制视频的缩略图。
如果您在 canvas 中绘制每一帧，您的 canvas 将看起来像一个 video 元素。您可以在绘制完帧后，在此 canvas 中绘制任何想要的内容。这就是我在这个演示中所做的。
在 canvas 中获得视频帧后，您可以计算像素值。
如果您想要计算帧的像素值，需要了解以下几点
- 您无法在来自不同域的视频上使用此机制。
- 您无法在来自 file:/// URL 的视频上使用此机制（这在开发 Web 应用程序时很有用）。但是您可以更改测试中的此行为：在 about:config 中，将“security.fileuri.strict_origin_policy”的值更改为“false”。但请务必小心！编辑 about:config —— 这是一个高级功能！
- 有两种方法可以在视频顶部显示应用程序的结果
- 使用 canvas 作为视频（如果每次都绘制帧），然后直接在 canvas 中绘制
- 在视频顶部使用透明的 canvas
- canvas 元素可以是“display: none”
- video 元素可以是“display: none”
关于 JavaScript
对于图像处理，您需要进行大量计算。以下是一些技巧
- 将您的帧复制到一个小 canvas 中。如果 canvas 比视频小三倍，则意味着要计算的像素数量少九倍。
- 避免递归。在递归中，脚本引擎不会使用 JIT 优化。
- 如果您想计算颜色之间的距离，请使用L.A.B 颜色空间。
- 如果你想找到一个物体的中心，计算它的质心。查看我的演示中使用的“computeFrame”函数这个 JavaScript 代码片段。
- 如果算法非常繁重，你可以使用一个Worker 线程，但要考虑到你需要将画布的内容发送到线程。这是一个很大的数组，对象在发送之前会自动进行 JSON 化。这可能需要一段时间。
结论
如你所见，你可以使用视频元素、画布元素、CSS3、SVG 和新的 JavaScript 引擎来完成强大的操作。你拥有创造完全新的视频网络使用方式的一切工具。现在就行动起来吧 - 升级网络！
参考资料
- LAB 色彩空间 - 用于色彩空间距离。
- 如何在 JavaScript 代码中使用线程。
- 质心定义 - 从像素计算物体中心的有效方法。
- TraceMonkey - 新的 Firefox JavaScript 引擎
- 使用画布进行像素操作。
- “动态内容注入”演示。
- canvas.drawImage API - 用于将视频帧注入画布元素。
- 如何在画布中进行变换。
- 对画布 API 的良好概述。
- 你需要了解的关于画布的一切。
- Firefox 3.5 中的所有新的 OpenWeb 功能。
- 在视频上叠加一个 div。
- 使用 CSS 3 进行变换。
- 在 SVG 中包含 HTML。
- 将 SVG 效果应用于 HTML 内容。
- 100% 的 OpenVideo 播放器。
- 视频和音频 HTML5 标签的参考。
- 视频和音频标签的 Javascript API。
- 视频 HTML 属性。
- 视频回退机制。
- 音频和视频元素支持的媒体格式。
- 我的演示。
17 条评论