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加载视频并播放