XMLHttpRequest加载视频并播放

  XMLHttpRequest加载视频文件2进制数据流到客户端,并使用video控件播放。结合XMLHttpRequest Level 2特性,可以使用XMLHttpRequest对象接受服务器端返回的2进制数据流,然后使用生成blob对象,URL.createObjectURL生成文件引用路径赋值给video标签即可播放。

  XMLHttpRequest加载视频并播放源代码如下

<%@ Page Language="C#" AutoEventWireup="true" %>
<%@ Import Namespace="System.IO" %>
<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        if (Request.QueryString["op"] == "read")
        {
            Response.ContentType = "video/mp4";
            Response.BinaryWrite(File.ReadAllBytes(Server.MapPath("2.mp4")));
            Response.End();
        }
    }
</script>
<video  autoplay id="v" style="width:500px;height:300px"></video><br /><input type="button" value="XHR Load Video Info" onclick="loadVideo()" />
<script>
    function loadVideo() {
        var xhr = new XMLHttpRequest();
        xhr.open('post', '?op=read');
        xhr.responseType = 'blob';//注意,要设置这个请求头,自己看下面列出的XMLHttpRequest Level 2内容介绍
        xhr.onreadystatechange = function () {
            if (4 == xhr.readyState) {
                if (200 == xhr.status) {
                    var blob = new Blob([xhr.response], { type: 'video/mp4' });
                    v.src = URL.createObjectURL(blob);
                }
                else alert(xhr.status + '\n' + xhr.responseText)
            }
        }
        xhr.send(null);
    }
</script>

  点击这里XMLHttpRequest加载视频并播放查看效果

参考:

XMLHttpRequest Level 2新特性介绍

URL.createObjectURL

加支付宝好友偷能量挖...


原创文章,转载请注明出处:XMLHttpRequest加载视频并播放

评论(0)Web开发网
阅读(411)喜欢(0)JavaScript/Ajax开发技巧