現在的js能產生一個連結,來指向本地端的一個檔案或物件
連結大多都會長這樣→blob:http%3A//localhost%3A8888/64fe4d0c-3a52-4c60-9858-90f70e91347c
那如果要來產生影片的blob連結,首先要先用非同步連線取得影片資源,轉成特殊字元檔存在本地端記憶體中,再產生連結來指向它
產生圖片blob連結的做法可參考這個範例→http://jsfiddle.net/Jan_Miksovsky/yy7Zs/
我依照這個範例去改成影片的
HTML:
[code lang=”html”]
<video id="test" controls></video>
[/code]
Javascript:
[code lang=”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();
[/code]