【转载】Spring MVC+MediaElement.js实现在WEB上播放MP4并支持拖移播放

最新推荐文章于 2024-06-29 08:28:03 发布

修心猿

最新推荐文章于 2024-06-29 08:28:03 发布

阅读量352

点赞数

分类专栏： SpringMvc

SpringMvc 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

导语
使用MediaElement.js，在WEB上可以播放MP4文件，功能强大，定制性强，支持拖移播放。若文件在工程目录下，则可以直接使用tomcat的DefaultServlet来处理，则MediaElement.js可以完美播放，若是自定义的，则继续往下看。

原理
播放器是采用分块请求下载的，断点续传的方式，其原理如下：
http协议中，服务端实现断点续传首先需要读取客户端传送的Range头信息，比如“Range: bytes=12583394-”这个就是指原来正在下载的文件需要从第12583394字节继续下载，然后我们利用Java.io.File的skip方法，舍弃掉原文件的前n个字节，接着就继续慢慢write吧。。。
但是客户端又是如何判断服务端是否支持断点续传的呢？主要就是Accept-Ranges和Content-Length头信息。比如“Accept-Ranges:bytes”和“Content-Length:99999999”。有了这两个头信息，客户端就认为服务端是支持断点续传的了。
然后需要注意的是，假如客户端刚才由于某些原因，暂停了下载，现在恢复的时候，就会如前所述，传来Range头信息，这时候，我们的response就需要设置一下状态码，这里应该设置成206(详细解释请看http://en.wikipedia.org/wiki/List_of_HTTP_status_codes)，还有就是Content-Range头信息，格式为“bytes x-(y-1)/y”，x就是客户端传来的开始字节位置，y就是文件长度。

实现
1.JSP页面

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link rel="stylesheet" href="vender/mediaelement/mediaelementplayer.css">
</head>
<body style="width: 100%; height: 100%;">
    <div class=warp">
        <div style="text-align: center;margin-top: 10px">
            <h2>${videoTitle}</h2>
        </div>

        <div style="margin: 0 auto;width: 1280px" data-options="border:false">
            <video src="${videoUrl}" width="1280" height="720"
                data-mejsoptions='{"stretching" : "auto","pluginPath" : "vender/mediaelement/", "alwaysShowControls": "true", "lang" : "zh-cn"}'></video>
        </div>
    </div>

        <script src="vender/jquery.js"></script>
    <script src="vender/mediaelement/mediaelement-and-player.js"></script>
    <script src="vender/mediaelement/lang/zh-cn.js"></script>
    <script type="text/javascript">
                // 设置语言为中文
        mejs.i18n.language('zh-CN');
                // 创建播放器
        $('video').mediaelementplayer({
            stretching : "auto",
            pluginPath : "vender/mediaelement/",
            alwaysShowControls : true,
            success : function(player, node) {
                player.play();
            }
        });
    </script>
</body>
</html>

2.Spring MVC的Controller

/**
     * 大文件分块下载
     * 
     * @param request
     * @param response
     * @throws IOException
     */
    @RequestMapping("/storage/**")
    public void bigFileDownload(HttpServletRequest request,
            HttpServletResponse response) throws IOException {
        String uri = URLDecoder.decode(request.getRequestURI(), "UTF-8");
        String filename = uri.substring(uri.indexOf(STORAGE) + STORAGE.length()
                + 1, uri.length());
        File downloadFile = fileService.getFile(filename); // 要下载的文件
        long fileLength = downloadFile.length();// 记录文件大小
        long pastLength = 0;// 记录已下载文件大小
        long toLength = 0;// 记录客户端需要下载的字节段的最后一个字节偏移量（比如bytes=27000-39000，则这个值是为39000）
        long contentLength = 0;// 客户端请求的字节总量
        String rangeBytes = "";// 记录客户端传来的形如“bytes=27000-”或者“bytes=27000-39000”的内容

        // ETag header
        // The ETag is contentLength + lastModified
        response.setHeader("ETag",
                "W/\"" + fileLength + "-" + downloadFile.lastModified() + "\"");
        // Last-Modified header
        response.setHeader("Last-Modified",
                new Date(downloadFile.lastModified()).toString());

        if (request.getHeader("Range") != null) {// 客户端请求的下载的文件块的开始字节
            response.setStatus(HttpServletResponse.SC_PARTIAL_CONTENT);
            log.info("request.getHeader(\"Range\")="
                    + request.getHeader("Range"));
            rangeBytes = request.getHeader("Range").replaceAll("bytes=", "");
            if (rangeBytes.indexOf('-') == rangeBytes.length() - 1) {// bytes=969998336-
                rangeBytes = rangeBytes.substring(0, rangeBytes.indexOf('-'));
                pastLength = Long.parseLong(rangeBytes.trim());
                toLength = fileLength - 1;
            } else {// bytes=1275856879-1275877358
                String temp0 = rangeBytes.substring(0, rangeBytes.indexOf('-'));
                String temp2 = rangeBytes.substring(
                        rangeBytes.indexOf('-') + 1, rangeBytes.length());
                // bytes=1275856879-1275877358，从第 1275856879个字节开始下载
                pastLength = Long.parseLong(temp0.trim());
                // bytes=1275856879-1275877358，到第 1275877358 个字节结束
                toLength = Long.parseLong(temp2);
            }
        } else {// 从开始进行下载
            toLength = fileLength - 1;
        }
        // 客户端请求的是1275856879-1275877358 之间的字节
        contentLength = toLength - pastLength + 1;
        if (contentLength < Integer.MAX_VALUE) {
            response.setContentLength((int) contentLength);
        } else {
            // Set the content-length as String to be able to use a long
            response.setHeader("content-length", "" + contentLength);
        }
        WebApplicationContext webApplicationContext = ContextLoader
                .getCurrentWebApplicationContext();
        ServletContext servletContext = webApplicationContext
                .getServletContext();
        String contentType = servletContext.getMimeType(filename);
        if (null != contentType) {
            response.setContentType(contentType);
        }

        // 告诉客户端允许断点续传多线程连接下载,响应的格式是:Accept-Ranges: bytes
        response.setHeader("Accept-Ranges", "bytes");
        // 必须先设置content-length再设置header
        response.addHeader("Content-Range", "bytes " + pastLength + "-"
                + toLength + "/" + fileLength);

        response.setBufferSize(2048);

        InputStream istream = null;
        OutputStream os = null;
        try {
            os = response.getOutputStream();
            istream = new BufferedInputStream(
                    new FileInputStream(downloadFile), 2048);
            try {
                copyRange(istream, os, pastLength, toLength);
            } catch (IOException ie) {
                /**
                 * 在写数据的时候， 对于 ClientAbortException 之类的异常，
                 * 是因为客户端取消了下载，而服务器端继续向浏览器写入数据时， 抛出这个异常，这个是正常的。
                 * 尤其是对于迅雷这种吸血的客户端软件， 明明已经有一个线程在读取 bytes=1275856879-1275877358，
                 * 如果短时间内没有读取完毕，迅雷会再启第二个、第三个。。。线程来读取相同的字节段， 直到有一个线程读取完毕，迅雷会 KILL
                 * 掉其他正在下载同一字节段的线程， 强行中止字节读出，造成服务器抛 ClientAbortException。
                 * 所以，我们忽略这种异常
                 */
                // ignore
            }
        } catch (Exception e) {
            log.error(e.getMessage(), e);
        } finally {
            if (istream != null) {
                try {
                    istream.close();
                } catch (IOException e) {
                    log.error(e.getMessage(), e);
                }
            }
        }
    }

    protected void copyRange(InputStream istream, OutputStream ostream,
            long start, long end) throws IOException {

        long skipped = 0;
        skipped = istream.skip(start);

        if (skipped < start) {
            throw new IOException("skip fail: skipped=" + Long.valueOf(skipped)
                    + ", start=" + Long.valueOf(start));
        }

        long bytesToRead = end - start + 1;

        byte buffer[] = new byte[2048];
        int len = buffer.length;
        while ((bytesToRead > 0) && (len >= buffer.length)) {
            try {
                len = istream.read(buffer);
                if (bytesToRead >= len) {
                    ostream.write(buffer, 0, len);
                    bytesToRead -= len;
                } else {
                    ostream.write(buffer, 0, (int) bytesToRead);
                    bytesToRead = 0;
                }
            } catch (IOException e) {
                len = -1;
                throw e;
            }
            if (len < buffer.length)
                break;
        }

    }