Firefox 开发亮点:video.playbackRate 和 download 属性

以下是 Firefox 为开发者提供的最新功能,作为我们 Bleeding Edge 系列 的一部分,大多数示例仅在 Firefox Nightly 中有效(并且可能会发生变化)。

<video>: 支持自定义 playbackRate

设置 video.playbackRate 会更改“视频速度”。1.0 是正常速度,2.0 是快 2 倍。来自 MDN 关于 HTMLMediaElement 的文档

媒体的默认播放速率。1.0 是“正常速度”,低于 1.0 的值会使媒体播放速度低于正常,较高的值会使媒体播放速度更快。

示例




交互式演示

video playbackRate 演示

<a> “download” 属性

来自 Whatwg.org 的 Living 标准中的下载资源

在某些情况下,资源用于以后使用,而不是立即查看。为了表明资源用于以后下载而不是立即使用,可以在创建指向该资源的超链接的 a 或 area 元素上指定 download 属性。

此属性对于 blobs 特别有用。使用 Blobs,您可以在 JavaScript 中创建文件。例如,二进制 blob 可以是画布元素中构建的图像。将二进制 blob 链接到 <a> 元素(使用 URL 构造函数)并使用此新属性将此 <a> 元素标记为可下载,用户将能够将 blob 保存为文件到他的硬盘驱动器。

来自 Tom Schuster 关于他在 HTML5 download 属性方面工作的博客文章 的示例:]

var blob = new Blob(["Hello World"]);
var a = document.createElement("a");
a.href = window.URL.createObjectURL(blob);
a.download = "hello-world.txt";
a.textContent = "Download Hello World!";

它也在 HTML5Rocks 中被报道,名为 在 HTML5 中下载资源

关于 Paul Rouget

Paul 是一位 Firefox 开发者。

更多来自 Paul Rouget 的文章……

关于 Robert Nyman [荣誉编辑]

技术布道者和 Mozilla Hacks 编辑。发表关于 HTML5、JavaScript 和开放网络的演讲和博客。Robert 是 HTML5 和开放网络的坚定支持者,自 1999 年以来一直在瑞典和纽约市从事网页前端开发工作。他还定期在 http://robertnyman.com 上发表博客,喜欢旅行和结识新朋友。

更多来自 Robert Nyman [荣誉编辑] 的文章……


4 评论

  1. WebDevPL

    在我看来,“download” 属性是 HTML 5 中最重要的功能之一。它对于在缓存的 Web 应用程序中实现离线输出(不使用 Content-Disposition HTTP 标头)是必要的。

    感谢 Tom Schuster 实现此属性。

    现在,“inert” 属性在我的最重要的未实现的 HTML 5 功能列表中名列第一。我希望它能在 2013 年实现。

    2012 年 12 月 6 日 下午 08:37

    1. Robert Nyman

      很高兴您对此感到满意!

      2012 年 12 月 6 日 下午 08:42

  2. Mindaugas Jakutis

    我无法相信浏览器供应商花费了这么长时间才实现 download 属性。

    真可惜。

    无论如何,感谢您的辛勤工作。迟到总比不到好。

    2012 年 12 月 19 日 上午 00:50

  3. Florina Löffler

    我目前正在尝试实现一个 webm 流式应用程序。
    为了应对带宽波动,我想降低嵌入视频的速度,让缓冲区重新填充。
    当缓冲区达到一定长度时,应将播放速率更改回正常速度。

    我尝试了上面的示例,使用的是 Firefox 20 测试版,它可以与从 Web 服务器加载的静态视频文件配合使用(没有流式传输,视频长度已知)。
    如果我尝试使用流式 webm 视频(长度未知,duration=inf)使用相同的方法,视频会在更改 playbackRate 后立即停止,并且无法重启。

    您有什么建议吗?

    2013 年 4 月 1 日 下午 08:07

本文评论已关闭。