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.

View full post on Mozilla Hacks – the Web developer blog

Leave a Reply