vue加載m3u8視頻格式

vue加載m3u8視頻格式（手機端）

vue加載視頻的方式有很多，但是想找到合適自己的很難，今天就給大家分享下vue手機端加載m3u8格式的視頻文件，廢話不多說，直接上碼：

第一步：npm install vue-video-player --save

第二步：在main.js中引入：如下代碼

import VideoPlayer from 'vue-video-player'
require ('vue-video-palyer/node-modules/video.js/dist/video-js.css')
const hls = require('vidojs-contrib-hls')
Vue.use(hls)

第三步：在需要加載視頻的頁面添加如下代碼

<video-player class="video-player vjs-customer-skin"
    ref="videoPlayer"
    :playsinline="true"
    :options="playerOptions"
>  
</video-player>


//在vue的data中添加options對象 格式如下
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: "application/x-mpegURL",//如果視頻格式是m3u8格式，需要添加該類型
      src: "" //url地址
    }],
    poster: "../../static/images/test.jpg", //你的封面地址
    // width: document.documentElement.clientWidth, //播放器寬度
    notSupportedMessage: '此視頻暫無法播放，請稍後再試', //允許覆蓋Video.js無法播放媒體源時顯示的默認信息。
    controlBar: {
      timeDivider: true,
      durationDisplay: true,
      remainingTimeDisplay: false,
      fullscreenToggle: true  //全屏按鈕
    }
}

第四步：在請求的接口中進行賦值操作 ，賦值給playerOptions.sources[0].src

關注點：在playerOptions的type需要設置視頻的格式，如果樣式有問題，需要在node-module中找到對應的插件進行修改樣式，也可以重新自己修改樣式優先級，覆蓋插件的樣式

以上，就是關於vue手機端播放m3u8格式視頻的所有步驟，如有疑問或者不足的地方，歡迎留言評論，感謝！