实现视频在线播放及下载

视频在线播放及下载

通过vue和Spring boot实现mp4视频的在线播放和下载功能。

1、前端

直接使用video标签，把src设置为后端接口名，通过携带文件名参数，指定播放的视频，代码如下：

<template>
  <video 
  id="video-player"
  autoplay
  controls="controls"
  width="100%"
  preload="auto"
  >
    <source 
    :src=mediaSrc 
    type="video/mp4" 
    />
  </video>
</template>

<script>
export default {
  data(){
    return{
    mediaSrc:'/api/getMedia/'+ ’视频名称‘;
    }
  },
}
</script>

autoplay表示加载完成后自动播放，controls表示使用进度条，preload表示提前加载。

2、后端

​ 通过Servlet传输视频流，需要注意的是设置http表头中的Accept-Range和Content-Length参数，前者用来实现进度条拖动的跳转播放，后者设定能跳转的长度范围。代码如下：

@RequestMapping("getMedia/{fileName}")
protected void getMedia(@PathVariable("fileName") String fileName, HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    
    // 获取要传输的MP4文件路径
    String filePath = "//Users//wqr//Downloads//"+fileName+".mp4";
    //通过文件流传输
    try (InputStream inputStream = new FileInputStream(new File(filePath));
         OutputStream outputStream = response.getOutputStream()) {
        // 设置及获取响应头信息
        response.setContentType("video/mp4");
        response.setHeader("Accept-Ranges", "bytes");
        String rangeString = request.getHeader("Range");//下载时会为null
        response.setHeader("Content-Length", String.valueOf(inputStream.available()));
        //区别下载和不下载的情况，不下载时设置Content-Range
        if (rangeString!=null){
            long range = Long.valueOf(rangeString.substring(rangeString.indexOf("=") + 1, rangeString.indexOf("-")));
            response.setHeader("Content-Range", String.valueOf(range + (inputStream.available()-1)));//拖动进度条时的断点
        }
        byte[] buffer = new byte[1024];
        int bytesRead;
        while ((bytesRead = inputStream.read(buffer)) != -1) {
            outputStream.write(buffer, 0, bytesRead);
        }
    } catch (FileNotFoundException e) {
        e.printStackTrace();
    }
}