[譯]HTML5:video.playbackRate以及download屬性

原文:https://hacks.mozilla.org/2012/12/firefox-development-highlights-video-playbackrate-download-attribute/

---

本文要講兩個Firefox Nightly(20)的新特性.

video元素支持自定義播放速率

通過改變video.playbackRate屬性的值可以改變視頻的播放速率.1.0是正常播放速度,2.0就兩倍快的播放速度.下面的介紹引用自MDN HTMLMediaElement:

playbackRate屬性可以控制媒體的播放速率.1.0是"正常速度",小於1.0的值會讓媒體播放得比正常速度慢,反之變快.

代碼示例:

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

Chrome也已經實現了這個屬性,演示:

當前播放速率:1.0

a元素支持"download"屬性

下面的介紹引用自HTML5規范草案:

為了表明一個資源是讓用戶下載的,而不是立即顯示的,可以給a元素或area元素添加download屬性來創建一個能下載該資源的超鏈接.

該屬性最適合和Blob配合使用.有了Blob,你可以使用JavaScript創建文件.一個二進制blob文件可以是一個用canvas元素生成的圖片.將blob URL(使用URL構造器生成)設置為a元素的鏈接並且給這個a元素指定download屬性,然后通過點擊這個鏈接,用戶就能把對應的blob文件下載到它們的硬盤上.

下面的代碼示例來自於Tom Schuste(他在Nightly中實現了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上也有一篇文章:Downloading resources in HTML5,Chrome去年就實現了這個屬性.

演示: