1. 程式人生 > >HTML5 Blob物件實現媒體播放功能

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);
        }