[Javascript]網頁影片連結使用blob

現在的js能產生一個連結，來指向本地端的一個檔案或物件

連結大多都會長這樣→blob:http%3A//localhost%3A8888/64fe4d0c-3a52-4c60-9858-90f70e91347c

那如果要來產生影片的blob連結，首先要先用非同步連線取得影片資源，轉成特殊字元檔存在本地端記憶體中，再產生連結來指向它

產生圖片blob連結的做法可參考這個範例→http://jsfiddle.net/Jan_Miksovsky/yy7Zs/

我依照這個範例去改成影片的

HTML:

<video id="test" controls></video>

Javascript:

var xhr = new XMLHttpRequest();

xhr.open( "GET", "/test.mp4", true );

xhr.responseType = "arraybuffer";

xhr.onload = function( e ) {
    var arrayBufferView = new Uint8Array( this.response );
    var blob = new Blob( [ arrayBufferView ], { type: "video/mp4" } );
    var urlCreator = window.URL || window.webkitURL;
    var imageUrl = urlCreator.createObjectURL( blob );
    var img = document.querySelector( "#test" );
    img.src = imageUrl;
};

xhr.send();