Spring Boot视屏上传播放详解

---

前言

视屏播放在浏览器是一个很重要的模块。我们可以用 html自带的video标签进行播放，后端可以直接存储到服务器文件夹中。但，今天我将详细的介绍，在网站开发中，视屏上传播放的做法。

一、视屏上传

视屏上传，前端选择文件，然后将文件流传给后端，后端保存在文件夹中。

前端代码

这里我在Vue3中使用axios与Element plus。
原生的<input>不是特别符合我们在平时使用的操作。创建一个按钮与一个<input>,将<input>进行隐藏

<template>
  <el-button @click="changeVideo">
    点击上传视屏
  </el-button>

  <input type='file' id="uploadVideo" v-show="false" @change='uploadVideo' accept=".mp4,.avi,.rmvb" />
</template>

按钮用于触发上传事件

  function changeVideo() {
   
    document.getElementById("uploadVideo").click();
  }

当选择好视频时，进行上传

  function uploadVideo(e) {
   
    const files = e.target.files;
    const filteredFiles = Array.from(files)
    if (filteredFiles.length !== 0) {
   
      const loading = ElLoading.service({
   
        lock: true,
        text: '上传中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });

      const formData = new FormData();
      formData.append('file', filteredFiles[0]);
      formData.append("fileName", "test")
      axios.post('/video', formData).then(res=>{
   
        ElMessage.success(res.data)
      })

      loading.close();
    }
  }

后端代码

将视频流存储到文件夹中就行了

    @PostMapping("/video")
    public String getVideo(@RequestParam("file") MultipartFile file, @RequestParam("fileName") String fileName) throws IOException {
   
        file.transferTo(new File("E:\\video\\test\\" + fileName + ".mp4"));
        return "Video uploaded successfully";
    }

需要注意的是。默认的axios上传的大小是有限制的，我们需要进行上传大小配置。

    /**
     * 文件上传配置
     * @return
     */
    @Bean
    public MultipartConfigElement multipartConfigElement() {
   
        MultipartConfigFactory factory = new MultipartConfigFactory();
        //文件最大
        factory.setMaxFileSize(DataSize.parse("10240KB")); //KB,MB
        /// 设置总上传数据总大小
        factory.setMaxRequestSize(DataSize.parse("102400KB"));
        return factory.createMultipartConfig();
    }

二、视屏播放

在上传视屏，我们配置将资源文件暴露出去，并且转为url

@Configuration
public class ResourcesConfig implements WebMvcConfigurer {
   
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry)
    {
   
        registry.addResourceHandler("video/**")
                .addResourceLocations("file:E:\\video\\test\\");
    }
}

前端用<video>标签就能播放了

<video src="http://localhost:8080/video/test.mp4" width="500" controls autoplay></video>

三、整合ffmpeg用m3u8切片播放

现在的视频播放，很少见这种直接将视频暴露出去的方式了。视屏一旦过大，会导致视频加载时间长。使用hls格式，将视频切分为片段（如下图所示），将视频慢慢加载过来，在直播中也常用。

hls的播放

1. 下载hls.js

npm install hls.js --registry=https://registry.npmmirror.com

2. js代码

var video = document.getElementById('video');
  if(Hls.isSupported()) {
   
    var hls = new Hls();
    hls.loadSource('http://localhost:8080/video/media.m3u8');
    hls.attachMedia(video);
    hls.on(Hls.Events.MANIFEST_PARSED,function() {
   
      video.play();
  });
 }

3. video.js
   前面使用的视频播放器，都是比较原生的，自己去进行添加功能特别麻烦。video.js是一款比较好的视频播放库。

npm install video.js

当然，想要使其能播放 hls视频，还需要下载其插件

videojs-contrib-hls

在main.js中进行配置

import "video.js/dist/video-js.css"; // 引入video.js的css
import hls from "videojs-contrib-hls"; // 播放hls流需要的插件
xxx.use(hls);

使用

<template>
  <div class="test-videojs">
    <video id="videoPlayer" class="video-js" muted></video>
  </div>
</template>
<script>
import Videojs from "video.js"; // 引入Videojs

export default {
   
  name: "videoPage",
  data() {
   
    return {
   
      nowPlayVideoUrl: "http://localhost:8080/video/media.m3u8"
    };
  },
  mounted() {
   
    this.initVideo(this.nowPlayVideoUrl);
  },
  methods: {
   
    initVideo(nowPlayVideoUrl) {
   
      // 这些options属性也可直接设置在video标签上，见 muted
      let options = {
   
        autoplay: true, // 设置自动播放
        controls: true, // 显示播放的控件
        sources: [
          // 注意，如果是以option方式设置的src,是不能实现 换台的 (即使监听了nowPlayVideoUrl也没实现)
          {
   
            src: nowPlayVideoUrl,
            type: "application/x-mpegURL" // 告诉videojs,这是一个hls流
          }
        ]
      };
      Videojs("videoPlayer", options);
    }
  }
}