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

来源：互联网发布：android c 高级编程编辑：程序博客网时间：2024/06/06 19:30

导语

使用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;        }    }

阅读全文

0 0