HTML5 Blob物件實現媒體播放功能
後臺程式碼:
public ActionResult Video()
{
string filePath = @"D:\download\test.mp4";
System.IO.FileInfo fileInfo = new System.IO.FileInfo(filePath);
if (fileInfo.Exists == true)
{
FileStream fs = new FileStream(filePath, FileMode.Open);
byte[] bytes = new byte[(int)fs.Length];
fs.Read(bytes, 0, bytes.Length);
fs.Close();
//Response.AddHeader("Content-Disposition", "attachment; filename=" + HttpUtility.UrlEncode(fileInfo.Name));
Response.AddHeader("Content-Length", "" + fileInfo.Length.ToString());
Response.AddHeader("Content-Transfer-Encoding", "binary");
Response.ContentType = "application/octet-stream";
Response.ContentEncoding = System.Text.Encoding.UTF8;
Response.BinaryWrite(bytes);
Response.Flush();
Response.End();
}
}
前臺程式碼:
html:
<video id="video_player" width="660" height="364" controls="controls"></video>
Js:
//建立XMLHttpRequest物件
var xhr = new XMLHttpRequest();
//配置請求方式、請求地址以及是否同步
xhr.open('POST', 'Video', true);
//設定請求結果型別為blob
xhr.responseType = 'blob';
//請求成功回撥函式
xhr.onload = function (e) {
if (this.status == 200) {//請求成功
//獲取blob物件
var blob = this.response;
var video = document.getElementById('video_player');
//獲取blob物件地址,並把值賦給容器
var obj_url = window.URL.createObjectURL(blob);
video.src = obj_url;
//video.play();
setTimeout("revokeUrl('" + obj_url + "')", "2000");
}
};
xhr.send();
function revokeUrl(url) {
window.URL.revokeObjectURL(url);
}