關於vue中的videoPlayer的src視頻地址參數動態修改（網上一堆錯誤方法，被誤導好久，本身找到了正確的方法，供你們借鑑）

方法很簡單：相信你們的問題應該是改變src的值吧，動態賦值這一步簡單。this.playerOptions['sources'][0]['src'] 就是這一步解決提取src問題，主要部分用綠色框起來了。

playerOptions 參數是一個字典對吧！修改字典中的值怎麼作不用多說吧直接賦值就行了，下面方法 的重點就是取出src參數進行賦值。

大家視頻的url從數據庫經過動態獲取過來的時候，直接賦值給這個字典中的src就好了，賦值方法：this.playerOptions['sources'][0]['src'] = this.url;  這是method中的方法響應成功後進行賦值的this.url是自行定義的變量。這個時候大家明白怎麼動態修改src的值了吧？（能獲取了，想在哪賦值想怎麼賦值都行了）。

先展現幾個坑爹博客的截圖，你們見到他們轉身就走吧，簡直是坑壁，發些複雜沒用的廢物方法，it界的敗類，亂髮東西本身不去驗證：

下面兩個就是方法一可行性未知可是複雜的一批，第二個則是徹底沒用，根本不須要用到ref屬性。

下面紅色部分裏面的playerOptions是設置播放器的參數，完整的播放功能須要設置四個地方，在這裏只展現了其中之一（參數設置，要完整的隨時留言）

 

 

 export default {
        name: "Video",
        data(){
            return{
                playerOptions: {
                playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
                autoplay: false, //若是true,則自動播放
                muted: false, // 默認狀況下將會消除任何音頻。
                loop: false, // 循環播放
                preload: 'auto',  // 建議瀏覽器在<video>加載元素後是否應該開始下載視頻數據。auto瀏覽器選擇最佳行爲,當即開始加載視頻（若是瀏覽器支持）
                language: 'zh-CN',
                aspectRatio: '16:9', // 將播放器置於流暢模式，並在計算播放器的動態大小時使用該值。值應該表明一個比例 - 用冒號分隔的兩個數字（例如"16:9"或"4:3"）
                fluid: true, // 當true時，Video.js player將擁有流體大小。換句話說，它將按比例縮放以適應其容器。

                sources: [{ // 播放資源和資源格式
                  type: "video/mp4",
                  src: ' ' //你的視頻地址（先爲空，以後動態賦值）
                }],

                poster: "../../static/images/img10.jpg", //視頻封面圖
                width: document.documentElement.clientWidth, // 默認視頻全屏時的最大寬度
                notSupportedMessage: '此視頻暫沒法播放，請稍後再試', //容許覆蓋Video.js沒法播放媒體源時顯示的默認信息。
              },
            }
        },

 

 

 

此處時methods方法中的函數

下面的方法是另外一個頁面點擊響應視頻跳到這個網頁，這個頁面接收到參數id並根據id從後端提取視頻的url

get_num(){
              this.num = this.$route.params.id;
              if(this.num==='521'){
                  this.url = 'http://img.ksbbs.com/asset/Mon_1703/05cacb4e02f9d9e.mp4'
              }else{
                   this.$axios.get(`${this.$settings.HOST}/planes/repair/${this.num}`,
                 ).then(response => {

　　　　　　#響應成功的數據中提取url賦值給變量url
                    this.url = "http://api.planecity.cn:8000"+ response.data['repair_video'];

　　　　　　#將url賦值給src

　　　　　　this.playerOptions['sources'][0]['src'] = this.url; 

                    console.log(this.url)                }).catch(error => {                    console.log(error);                    console.log('對不起維修信息獲取失敗')                })              }              return this.num;            },