npm i -S video.js

// main.js (入口文件中引入js和樣式文件)
import videojs from 'video.js'
import 'video.js/dist/video-js.css'
 
// 如果需要可以注冊(cè)為vue全局方法
Vue.prototype.$video = videojs;

<!-- 視頻播放組件 -->
 
<template>
    <video
    ref="videoPlayer"
    class="video-js"
    >
 
    </video>
</template>
<script>
export default {
    name: 'VideoPlayer',
    props: {
        // 視頻播放地址
        url: {
            type: String,
        }
    },
    data () {
        return {
            // 視頻實(shí)例
            player: null,
        }
    },
    methods: {
        // 改變視頻播放地址
        changeVideoSrc (src) {
            this.player.src([{
                src,
                type: 'video/mp4'
            }])
        },
    },
    mountd () {
        // 初始化視頻
        // this.$video 就是 videojs, 文件入口內(nèi)已經(jīng)全局注冊(cè)了
        this.player = this.$video(this.$refs.videoPlayer, {
            language: 'zh-CN', // 中文
            responsive: true,
            autoplay: false,
            preload: 'auto',
            playbackRates: [1, 1.5, 2],
            sources: [{
                src: this.url,
                type: 'video/mp4'
            }]
        }, () => {
            this.player.log('ready', this)
        })
    },
    beforeDestory () {
        this.player && this.player.dispose();
    },
    
}
</script>

// 父組件中引入視頻組件
 
<VideoPlayer :url="url">
 
// 這里可以寫個(gè)固定的地址測(cè)試一下視頻組件能否播放
// 注意：不能是本地視頻。比如是服務(wù)器上的視頻才可以播放。

// 視頻列表代碼比較簡(jiǎn)單不再寫了  直接寫切換方法
 
// 比如在父組件中  
<VideoPlayer ref="players" />
 
<!-- 視頻切換列表 -->
 
<li
v-for="video in videos"
:key="video.id"
@click="changeVideoSource(video)"
>{{ 視頻名稱 }}</li>
 
 
// 視頻切換方法
changeVideoSource (video) {
    this.$refs.players.changeVideoSrc(video.src);
},

npm i -S plupload

up.setOption("multipart_params", {
            
            "size":file.size,
            "md5":file.md5,
            filename: 'hahaha',
            id: '123456',
            // .......
        });