vue实现视频播放 video-player

视频上传 这里不多做叙述 今天主要讲视频播放

插件

cnpm install --save video.js
cnpm install --save vue-video-player

播放按钮

播放

/** 播放按钮操作 */
    handlePlay(row) {
      this.$router.push({
        path: '/pxxj/play',
        name: 'bfsp',
        params: {
          row
        }
      })
    }

就是在这个页面跳到内阁play 播放页面 播放页面的代码如下

这个后台地址是我自己写的 也很简单 就是把文件取出来然后以流的形式输出

 this.url =  process.env.VUE_APP_BASE_API + "/common/video/" + this.num + "/download"; 

后端代码简单如下 第一步就是取文件 你们按照你们自己的来取就行 我是存在mongdb里了 你们也可以存在文件夹下 然后来取 都可以的 不懂得自行百度或者在下面问

 @RequestMapping(value = "/common/video/{fileId}/{type}")
    public void video(@PathVariable("fileId") String fileId, @PathVariable("type") String type, HttpServletRequest request, HttpServletResponse response) throws Exception {

        BizShareFile shareFile = shareFileAPI.getBizShareFile(fileId);
        request.setCharacterEncoding("UTF-8");
        response.setContentType("video/mpeg4");
        OutputStream out = response.getOutputStream();
        GridFsResource resource = mongoDbUtil.downloadFile(shareFile.getFilepath());
        StreamUtils.copy(resource.getInputStream(), out);
        InputStream in = resource.getInputStream();
        byte[] b = new byte[1024*1024];
        while ((in.read(b)) != -1) {
            out.write(b);
        }
        out.flush();
        in.close();
        out.close();
    }

学无止境，学海无涯 加油，致奋斗的自己