后台：

@GetMapping("/video/view")
//    @AnonymousAccess
public void viewVideo(@RequestParam("fileId") String fileId, HttpServletResponse response) throws BusinessException{
    commonService.viewVideo(fileId, response);
}
public void viewVideo1(String fileId, HttpServletResponse response) throws BusinessException {

    try {
        //根据用户的图片路径，创建文件
        File file = new File("D:\\img", fileId + ".mp4");
        response.setContentType("video/mp4");
        OutputStream os = response.getOutputStream();
        response.setHeader("Content-Length", String.valueOf(file.length()));
        Files.copy(file.toPath(), os);
        os.close();
    } catch (Exception e) {
        LOGGER.warn("文件下载失败：" + e.getMessage());
        throw new BusinessException(BaseStatus.FAILED, "文件读取失败，请稍后重试。", e.toString());
    }
}

 前端：

//先安装vue-video-player

1，安装 npm install vue-video-player --save

2，引入

import Vue from 'vue';
import VueVideoPlayer from 'vue-video-player';
import 'video.js/dist/video-js.css';
import 'vue-video-player/src/custom-theme.css';

Vue.use(VueVideoPlayer);
3，使用

<template>
  <div>
    <video-player ref="videoPlayer" :options="playerOptions" @ready="onPlayerReady"></video-player>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      videoId: 1,
      playerOptions: {
        sources: [],
        type: 'video/mp4',
        autoplay: true
      }
    }
  },
  mounted() {
    this.getVideo();
  },
  methods: {
    async getVideo() {
      const res = await axios.get(`/video/view/${this.videoId}`, { responseType: 'arraybuffer' });
      const videoBlob = new Blob([res.data], { type: 'video/mp4' });
      const videoUrl = URL.createObjectURL(videoBlob);
      this.playerOptions.sources = [{src: videoUrl, type: 'video/mp4'}];
    },
    onPlayerReady() {
      console.log('Player is ready');
    }
  }
}
</script>

Note:

如果使用https，需要设置请求头

axios.defaults.headers.common['Access-Control-Allow-Origin'] = '*';
axios.defaults.headers.common['Access-Control-Allow-Headers'] = 'Origin, X-Requested-With, Content-Type, Accept';
axios.defaults.headers.common['Access-Control-Allow-Methods'] = 'GET, POST, OPTIONS, PUT, PATCH, DELETE';