摘要：背景根據(jù)用戶的信息來顯示不同的視頻源默認(rèn)情況下將會(huì)消除任何音頻。換句話說，它將按比例縮放以適應(yīng)其容器。此視頻暫無法播放，請(qǐng)稍后再試允許覆蓋無法播放媒體源時(shí)顯示的默認(rèn)信息。

背景：根據(jù)用戶的信息來顯示不同的視頻源

export default {
    data () {
        return {
            playerOptions: {
                    // videojs options
                    muted: true,
                    language: "en",
                    playbackRates: [0.7, 1.0, 1.5, 2.0],
                    sources: [{
                        type: "video/mp4",
                        src: "https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm"
                        // src: "http://www.17sucai.com/preview/501914/2017-08-04/%E9%A1%B5%E9%9D%A2/media/mov_bbb.mp4"
                    }],
                    muted: false, // 默認(rèn)情況下將會(huì)消除任何音頻。
                    loop: false,
                    language: "zh-CN",
                    fluid: true, // 當(dāng)true時(shí)，Video.js player將擁有流體大小。換句話說，它將按比例縮放以適應(yīng)其容器。
                    poster: "/static/images/author.jpg",
                    width: 700,
                    notSupportedMessage: "此視頻暫無法播放，請(qǐng)稍后再試", //允許覆蓋Video.js無法播放媒體源時(shí)顯示的默認(rèn)信息。
                },
        }
    },
    methods: {
        showVideo (bol) {
            let myPlayer = this.$refs.videoPlayer.player;
            if( bol ) {
                myPlayer.src(this.getUserType); //根據(jù)userType的不同展示不同的視頻地址
              return false
            };
        }
    },
    computed: {
        getUserType () {
            let userType = parseInt(this.userInfo.userType);
            let videoSrc = ""
            if(userType === 1){
                videoSrc = "https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm"
            }else if (userType === 2){
                videoSrc = "http://www.17sucai.com/preview/501914/2017-08-04/%E9%A1%B5%E9%9D%A2/media/mov_bbb.mp4"
            }
            return videoSrc;
        }
    }
}

初始 playerOptions.sources.src必須有值，否則后續(xù)視頻的進(jìn)度條會(huì)有問題
//感覺我使用的是最笨的方法，如果有更好的方法，望留言指教>_<

需要更改播放按鈕，默認(rèn)的是有一個(gè)比較丑的播放按鈕，但是設(shè)計(jì)人員給出的播放按鈕比較漂亮，一開始的思路是怎么把控制播放的事件綁定到自己寫的按鈕上面，最終沒有實(shí)現(xiàn)= =。。。

然后開始想改變樣式來控制，直接暴力修改它原本的樣式，并通過比較播放暫停播放狀態(tài)容器上類名的不同來顯示隱藏“漂亮”的播放按鈕

播放時(shí)和暫停時(shí)容器的類名差別是有沒有  “vjs-paused”

最終的解決方法：
        .video-js{
            .fs(24);// 樣式文件里元素的單位是em，因?yàn)榭刂茥l太小了，默認(rèn)的font-size是10px，所以這里做了更改。 fs(24)最終通過less的處理會(huì)轉(zhuǎn)換為rem單位
        }
        .video-js .vjs-big-play-button{
            position: absolute;
            display: block;
            left: 0px;
            top: 0px;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, .7);
            border: none;
        }
        .video-js .vjs-big-play-button .vjs-icon-placeholder:before{
            position: absolute;
            content: "";
            .w(120);
            .h(120);
            left: 50%;
            top: 50%;
            .ml(-60);
            .mt(-60);
            background: url("../../assets/images/[email protected]") center center no-repeat;
            background-size: 100% 100%;
            border: none;
        }
       //下面代碼控制播放按鈕是否顯示
        .vjs-controls-disabled .vjs-big-play-button, .vjs-has-started .vjs-big-play-button, .vjs-using-native-controls .vjs-big-play-button, .vjs-error .vjs-big-play-button {
            display: none;
        }
        .vjs-paused .vjs-big-play-button {
            display: block;
        }

今天腦袋突然開竅，發(fā)現(xiàn)一個(gè)不用更改原先的css就可以實(shí)現(xiàn)控制播放的方法，其實(shí)這樣子用就可以，