SpringBoot2+Vue2实战(十六)vue集成视频播放组件

修改文件上传大小限制

  servlet:
    multipart:
      max-file-size: 100MB
      max-request-size: 100MB

Video.vue

router/index.js

{
                path: 'video',
                name: 'video',
                component: () => import('../views/front/Video.vue')
            },
            {
                path: 'videoDetail',
                name: 'VideoDetail',
                component: () => import('../views/front/VideoDetail.vue')
            },

FileController

@GetMapping("/detail/{id}")
    public Result getById(@PathVariable("id") Integer id){
        return Result.success(fileMapper.selectById(id));
    }

VideoDetail.vue

安装视屏播放器组件

npm install [email protected] --save

引入组件

VideoDetail

    

      
      
    
  


import {videoPlayer} from 'vue-video-player'
import 'video.js/dist/video-js.css'



components:{
    videoPlayer
  },



data() {
    return {
      /*id:this.$route.query.id*/
      video: {},
      playerOptions: {
        playbackRates: [0.5,1.0,1.5,2.0], // 可选的播放速度
        autoplay: false, // 如果为true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 是否视频一结束就重新开始。
        preload: "auto", // 建议浏览器在

引入video.js

npm install video.js -S