Firefox Development Highlights: video.playbackRate and download attribute

Here are the latest features in Firefox for developers, as part of our Bleeding Edge series, and most examples only work in Firefox Nightly (and could be subject to change).

<video>: support for custom playbackRate

Setting video.playbackRate changes the “video speed”. 1.0 is regular speed, 2.0 is 2 times faster. From the MDN documentation on HTMLMediaElement:

The default playback rate for the media. 1.0 is “normal speed,” values lower than 1.0 make the media play slower than normal, higher values make it play faster.

Example:

<video src="v.webm" id="v" controls autoplay></video>
<button onclick="fastForward()">fast foward</button>
<script>
  fastFoward() {
    v.playbackRate = 2;
  }
</script>

Interactive demo:

video playbackRate demo

<a> “download” attribute

From Downloading resources in the Living standard at Whatwg.org:

In some cases, resources are intended for later use rather than immediate viewing. To indicate that a resource is intended to be downloaded for use later, rather than immediately used, the download attribute can be specified on the a or area element that creates the hyperlink to that resource.

This attribute is particularly useful with blobs. With Blobs, You can create files in JavaScript. A binary blob can be an image built in a canvas element for example. Linking binary blobs to a <a> element (with a URL constructor) and marking this <a> element as downloadable with this new attribute, the user will be able to save the blob as a file on his hard-drive.

Example from Tom Schuster’s blog post about his work on the HTML5 download attribute: ]

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!";

It has also been covered on HTML5Rocks in Downloading resources in HTML5.

About Paul Rouget

Paul is a Firefox developer.

More articles by Paul Rouget…

About Robert Nyman [Editor emeritus]

Technical Evangelist & Editor of Mozilla Hacks. Gives talks & blogs about HTML5, JavaScript & the Open Web. Robert is a strong believer in HTML5 and the Open Web and has been working since 1999 with Front End development for the web - in Sweden and in New York City. He regularly also blogs at http://robertnyman.com and loves to travel and meet people.

More articles by Robert Nyman [Editor emeritus]…


4 comments

  1. WebDevPL

    I my opinion “download” attribute was one o the most importatnt features of HTML 5. It’s necessary for implementing offline output (without using Content-Disposition HTTP header) in cached web application.

    Thank you Tom Schuster for implementing this attribute.

    The “inert” attribute has first place now in my list of the most important and unimplemented features of HTML 5. I hope it will be implemented in 2013.

    December 6th, 2012 at 08:37

    1. Robert Nyman

      Glad you’re happy about it!

      December 6th, 2012 at 08:42

  2. Mindaugas Jakutis

    I can’t believe it takes browser vendors so long to implement the download attribute.

    Such a shame.

    Anyway, thanks for your work. Better late than never.

    December 19th, 2012 at 00:50

  3. Florina Löffler

    I’m currently trying to implement a webm streaming application.
    In order to react to fluctuations in bandwith I want to slow down the emedded video to let the buffer refill.
    When the buffer reaches a certain length the playback rate should be changed back to normal.

    I tried the above example with Firefox 20 beta and it works with a static video file loaded from the webserver (no streaming, video length is known).
    If I try the same same approach with a streamed webm video (length is not known duration=inf) the video stops as soon as I change the playbackRate and cannot be restarted.

    Do you have any suggestions?

    April 1st, 2013 at 08:07

Comments are closed for this article.