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

SpringBoot2+Vue2实战(十六)vue集成视频播放组件_第1张图片

 

你可能感兴趣的:(vue.js,音视频,javascript)