• Re:从零开始学流媒体(一):视频跳转、206、chunked、动态URL、断点续传


    一、静态路由视频播放

    首先,不考虑用最新的技术,不考虑m3u8,用最传统的方式,如何实现页面播放视频?

    最简单的是直接引用资源路径。

    Demo如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link href="https://vjs.zencdn.net/7.5.4/video-js.css" rel="stylesheet">
    </head>
    <body>
    <video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" width="640" height="264"
           poster="http://vjs.zencdn.net/v/oceans.png">
    <!--    <source src="/frag_bunny.mp4" type="video/mp4">-->
        <source src="/getMovie" type="video/mp4">
    
    </video>
    </body>
    </html>
    <script src='https://vjs.zencdn.net/7.5.4/video.js'></script>
    <script type="text/javascript">
        var player1 = videojs('example_video_1');
        player1.play();
    </script>

    其中src填入的是你项目静态资源路由根目录.

    二、动态URL播放视频

    由于不是所有资源都在静态路由的,资源可能是云存储,可能是其他文件路径。

    使用静态路由,太不方便,nginx可以映射到其他位置。

    但考虑到权限、云存储等问题。动态路由很有必要。

    如何实现动态路由?

    看上去很简单,我只需要设置HttpResponse的表头setContentType、 FileInputStream填入文件,用OutputStream读取文件就可以了

    网上有很多例子。

    但是这样做有个弊端:按顺序读取文件。也就是视频你无法跳转播放!他只能按顺序缓冲。

    为什么使用动态URL无法跳转视频,静态URL却可以跳转播放?

    这就涉及到了Http协议的问题了。

    通过对比静态Url和动态Url的HttpResponse,我们知道:

    如果是动态路由,默认的传输方式是Transfer-Encoding为chunked,成功类型为200,这样的方式是无法支持视频跳转和断点续传等功能的。

    所以我们需要手动修改返回类型和请求头。

    我们只需要设置Content-Length和Content-Range,并设置状态为206,之后Transfer-Encoding:chunked就会自动被取消掉(需要注意的一个细节,设置Content-Length和Content-Range必须要在inputStream执行之前)

    而Range需要根据HttpRequest来具体的数字处理和拼接。

    服务器端代码如下:

    @ResponseBody
        @RequestMapping("getMovie")
        public void getMovie(HttpServletRequest request, HttpServletResponse response) throws IOException {
            String path = "/Users/Desktop/movie/aaa.mp4";
            response.setContentType("video/mp4");
            response.setHeader("Accept-Ranges", "bytes");
            response.setStatus(javax.servlet.http.HttpServletResponse.SC_PARTIAL_CONTENT);
    
            long fSize=new File(path).length();
    
            long pos = 0, last = fSize - 1, sum = 0;//pos开始读取位置;  last最后读取位置;  sum记录总共已经读取了多少字节
            if (null != request.getHeader("Range")) {
             response.setStatus(HttpServletResponse.SC_PARTIAL_CONTENT);
                try {
                    String numRang = request.getHeader("Range").replaceAll("bytes=", "");
                    String[] strRange = numRang.split("-");
                    if (strRange.length == 2) {
                        pos = Long.parseLong(strRange[0].trim());
                        last = Long.parseLong(strRange[1].trim());
                    } else {
                        pos = Long.parseLong(numRang.replaceAll("-", "").trim());
                    }
                } catch (NumberFormatException e) {
                    pos = 0;
                }
            }
            long rangLength = last - pos + 1;// 总共需要读取的字节
    
            response.setHeader("Content-Range", "bytes " + pos + "-" + last + "/" + fSize);
            response.setHeader("Content-Length", String.valueOf(rangLength));
    
            FileInputStream in = new FileInputStream(new File(path));
            in.skip(pos);
            OutputStream out = response.getOutputStream();
    
            byte[] b = new byte[512];
    
            int length = 0;
            while (sum < rangLength) {
                length = in.read(b, 0, ((rangLength - sum) <= b.length ? ((int) (rangLength - sum)) : b.length));
                sum = sum + length;
                out.write(b, 0, length);
            }
    
            out.flush();
            in.close();
            out.close();

    然后,就可以通过/getMovie来随意读取文件,可以实现跳转播放了。

  • 相关阅读:
    加载默认图片,如何避免img标签陷入onerror事件死循环
    Windows 7安装解压版MySQL 5.6(不包含配置文件优化)
    【总结2】PhpStorm利用XDebug调试PHP技巧
    【总结1】PhpStorm配置XDebug(远程)调试PHP
    JavaScript跳转到页面某个锚点#
    数据库查询中的特殊字符的问题
    CSS3/jQuery自己定义弹出窗体
    4.Maven概念模型,maven的生命周期,Maven坐标,依赖管理(依赖范围,依赖声明),仓库管理,私服概念
    从Wolframserver获取DC comics卡通人物数据
    S5PV210开发系列四_uCGUI的移植
  • 原文地址:https://www.cnblogs.com/pghcx/p/15147729.html
Copyright © 2020-2023  润新知