(十一)ATP应用测试平台——使用vue-video-player视频播放组件实现网页视频流的播放案例实战

前言

在网页中播放视频也是我们经常要使用到的功能，例如设备监控的视频流实时播放，MP4、m3u8等视频资源播放等等，在vue项目中，我们可以使用目前封装好的开源组件vue-video-player实现上述的要求。本节我们就详细讲解一下如何使用vue-video-player组件实现视频资源的播放，这里特别要说明的一点是关于本节内容中后端视频资源接口需要特殊处理，否则返回给前端的视频资源无法快进或者后退播放。源码地址：https://gitee.com/northcangap/atp。喜欢的朋友可以star一下哦，创作不易。效果如下：

正文

①安装vue-video-player

命令：npm i vue-video-player -s

②main.js中全局引入vue-video-player组件

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import router from '@/router';
import {http} from '@/axios/index';
import qs from 'qs';
import '@/util/derective'
import App from '@/App.vue';
import Print from 'vue-print-nb'
import VideoPlayer from 'vue-video-player'
require('video.js/dist/video-js.css')
require('vue-video-player/src/custom-theme.css')

Vue.use(VideoPlayer)
Vue.use(Print);
Vue.use(ElementUI);
Vue.prototype.$http = http;
Vue.prototype.$qs = qs;
Vue.config.productionTip = false;

new Vue({
    router,
    render: h => h(App),
}).$mount('#app')

 ③前端代码VideoPlayer.vue

 ④后端代码

 VideoController.class

package com.yundi.atp.platform.module.test.controller;

import com.yundi.atp.platform.config.NonStaticResourceHttpRequestHandler;
import io.swagger.annotations.Api;
import io.swagger.annotations.ApiOperation;
import org.apache.commons.lang3.StringUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.nio.charset.StandardCharsets;
import java.nio.file.Files;
import java.nio.file.Path;
import java.nio.file.Paths;

/**
 * @Author: yanp
 * @Description: 视频播放控制层
 * @Date: 2021/8/20 15:15
 * @Version: 1.0.0
 */
@Api(tags = {"视频管理"})
@RestController
@RequestMapping(value = "/video")
public class VideoController {
    @Autowired
    private NonStaticResourceHttpRequestHandler nonStaticResourceHttpRequestHandler;

    @ApiOperation(value = "视频下载")
    @GetMapping(value = "/download")
    public void downloadModel(HttpServletRequest request, HttpServletResponse response) throws IOException, ServletException {
        String fileFullPath = VideoController.class.getResource("/").getPath().substring(1) + "big_buck_bunny.mp4";
        Path filePath = Paths.get(fileFullPath);
        if (Files.exists(filePath)) {
            String mimeType = Files.probeContentType(filePath);
            if (!StringUtils.isEmpty(mimeType)) {
                response.setContentType(mimeType);
            }
            request.setAttribute(NonStaticResourceHttpRequestHandler.ATTR_FILE, filePath);
            nonStaticResourceHttpRequestHandler.handleRequest(request, response);
        } else {
            response.setStatus(HttpServletResponse.SC_NOT_FOUND);
            response.setCharacterEncoding(StandardCharsets.UTF_8.toString());
        }
    }
}

 NonStaticResourceHttpRequestHandler.class

package com.yundi.atp.platform.config;

import org.springframework.core.io.FileSystemResource;
import org.springframework.core.io.Resource;
import org.springframework.stereotype.Component;
import org.springframework.web.servlet.resource.ResourceHttpRequestHandler;

import javax.servlet.http.HttpServletRequest;
import java.nio.file.Path;

/**
 * @Author: yanp
 * @Description: 视频播放器
 * @Date: 2021/8/20 15:49
 * @Version: 1.0.0
 */
@Component
public class NonStaticResourceHttpRequestHandler extends ResourceHttpRequestHandler {
    public final static String ATTR_FILE = "NON-STATIC-FILE";

    @Override
    protected Resource getResource(HttpServletRequest request) {
        final Path filePath = (Path) request.getAttribute(ATTR_FILE);
        return new FileSystemResource(filePath);
    }

}

⑤视频资源位置

 ⑥验证结果

结语

ok，本小节内容到这里就结束了，我们下期见。。。