后台代码:

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, , 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="" height="" 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 == ) {//请求成功
                    //获取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 + "')", "");
                }
            };
            xhr.send();        function revokeUrl(url) {
            window.URL.revokeObjectURL(url);
        }

c# HTML5 Blob对象实现媒体播放功能的更多相关文章

  1. [HTML5] Blob对象

    写在前面 本篇主要总结Blob对象属性及作用,通过DEMO介绍Blob对象的应用场景. Blob对象 一直以来,JS都没有比较好的可以直接处理二进制的方法.而Blob的存在,允许我们可以通过JS直接操 ...

  2. HTML5中的Blob对象的使用

    HTML5中的Blob对象和MYSQL中的BLOB类型在概念上是有点区别的.MYSQL中的BLOB类型就只是个二进制数据容器.而HTML5中的Blob对象除了存放二进制数据外还可以设置这个数据的MIN ...

  3. HTML5新特性之文件和二进制数据的操作 Blob对象

    HTML5新特性之文件和二进制数据的操作 1.Blob对象 2.FileList对象 3.File对象 4.FileReader 对象 5.URL对象

  4. HTML5 FileReader读取Blob对象API详解

    使用FileReader对象,web应用程序可以异步的读取存储在用户计算机上的文件(或者原始数据缓冲)内容,可以使用File对象或者Blob对象来指定所要读取的文件或数据.其中File对象可以是来自用 ...

  5. [HTML5] FileReader对象

    写在前面 前一篇文章介绍了HTML5中的Blob对象(详情戳这里),从中了解到Blob对象只是二进制数据的容器,本身并不能操作二进制,故本篇将对其操作对象FileReader进行介绍. FileRea ...

  6. 前端H5中JS用FileReader对象读取blob对象二进制数据,文件传输

    HTML5中的Blob对象只是二进制数据的容器,本身并不能操作二进制,故本篇将对其操作对象FileReader进行介绍. FileReader FileReader主要用于将文件内容读入内存,通过一系 ...

  7. JS 之Blob 对象类型

    原文 http://blog.csdn.net/oscar999/article/details/36373183 什么是Blob? Blob 是什么? 这里说的是一种Javascript的对象类型. ...

  8. blob 对象 实现分片上传 及 显示进度条

    blob对象介绍 一个 Blob对象表示一个不可变的, 原始数据的类似文件对象.Blob表示的数据不一定是一个JavaScript原生格式 blob对象本质上是js中的一个对象,里面可以储存大量的二进 ...

  9. js中关于Blob对象的介绍与使用

    js中关于Blob对象的介绍与使用   blob对象介绍 一个 Blob对象表示一个不可变的, 原始数据的类似文件对象.Blob表示的数据不一定是一个JavaScript原生格式 blob对象本质上是 ...

随机推荐

  1. Linux libcurl安装及注意事项

    一.下载 官网下载地址 :  https://curl.haxx.se/download.html 选择最新的一个即可. 二.安装 1.解压 下载到的压缩包为curl-7.51.0.tar.gz,使用 ...

  2. spark读写Oracle、hive的艰辛之路(二)-Oracle的date类型

    近期又有需求为:导入Oracle的表到hive库中: 关于spark读取Oracle到hive有以下两点需要说明: 1.数据量较小时,可以直接使用spark.read.jdbc(orclUrl,tab ...

  3. Hive元数据配置到MySql

    1 驱动拷贝 1.在/opt/software/mysql-libs目录下解压mysql-connector-java-5.1.27.tar.gz驱动包 [root@hadoop102 mysql-l ...

  4. HTTP1.0、HTTP1.1、HTTP2.0的关系和区别

    一.汇总对比 HTTP1.0 无状态.无连接HTTP1.1 持久连接请求管道化增加缓存处理(新的字段如cache-control)增加Host字段.支持断点传输等(把文件分成几部分)HTTP2.0 二 ...

  5. HUSTOJ 有序表的最小和

    一次奇怪的AC经历...上周被这道题卡了3天... 传送门:http://oj.gdsyzx.edu.cn/problem.php?id=1475 题目描述 给出两个长度为n的有序表A和B,在A和B中 ...

  6. leetcode 数据库练习 - 1205 每月交易I和II

    每月交易(一) Table: Transactions +---------------+---------+| Column Name | Type |+---------------+------ ...

  7. webstorm永久破解

    准备 1. webstorm下载 本次使用的是2017.3.3版本,如果找不到那么在此附上:webstorm各版本下载地址. 前段时间有朋友反馈破解不成功,今天本人亲测2017.3.3仍可以破解成功, ...

  8. Django 的 slug url 正则匹配

    如果按照 .* 去匹配,最后会把 /edit/ 和 /delete/ 也匹配进去. urlpatterns = [ #... url(r'^(?P<slug>.*)/$', post_de ...

  9. nginx之allow、deny

    allow和deny这两个指令的意思是指,允许ip和限制ip 在此之前不得不提一下,这两个指令是存在于ngx_http_access_module模块之中的 allow语法:allow address ...

  10. GCC编译UDF和gdb调试UDF

    Fluent版本:19.0 前面我们介绍过使用VS来编译和调试UDF,其实我们也可以用GCC来编译UDF.gdb调试UDF.本次介绍的方法更具有通用性,也适用于Linux下Fluent的UDF编译和调 ...