關於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;
            },