zoukankan      html  css  js  c++  java
  • HTML5 Video播放服务端大文件

    HTML5 Video

    Video是html5添加的新元素,用于视频的播放,使用也特别简单

    <video width="320" height="240" controls>
      <source src="movie.mp4" type="video/mp4">
      您的浏览器不支持Video标签。
    </video>
    

    注意简单的Demo直接Copy使用可能会出现问题的,果然当movie.mp4文件过大时,会将整个文件下载下来才播放。

    需求

    如果视频文件太大,对Video要求:

    • 边播放,边下载
    • 可以指定位置播放

    Http 部分请求

    要满足上面的需求,首先想到Http部分请求,Http请求协议中对部分内容请求要求:

    • Http部分内容请求头部需要指定:Range:bytes=0-
    • Http响应需要指定响应头:content-range:bytes:0-、httpcode为206

    让客户端和服务端遵循Http部分内容请求要求

    客户端即使Video元素(刚开始自己还卡在这里,怎样才能控制Video发送部分请求),但其实Video默认为部分内容请求,也随着播放继续加载后面的视频(想想也是如果不支持也太麻烦了)
    注意 video的请求为Range:bytes=startIndex-,Range的结束位置没有设定,这样请求的范围为startIndex到文件最后。但我们可以在服务端指定每次请求返回数据的大小,单位为bytes.

    服务端

    服务端读取请求头Range查看是否是部分请求,如果是则需要:

    • 读取相应大小的流文件,作为响应体
    • 设置响应头,如Content-Range: bytes 2293762-3342338/145108958最后的为文件的总大小
    • 设置响应返回码 206

    我用的是asp.net web api技术处理比较简单,代码

  • 相关阅读:
    java web图片显示到浏览器
    Spring MVC + jpa框架搭建,及全面分析
    spring常用jar包总结(转载)
    搭建基于Maven的SSM框架
    线程同步的几种方法
    HttpServlet容器响应Web客户流程
    forword 与 redirect
    Hibernate状态转换
    String StringBuffer StringBuilder 对比
    位运算符
  • 原文地址:https://www.cnblogs.com/LoveTomato/p/10341323.html
Copyright © 2011-2022 走看看