vue-video-player使用心得（相容m3u8）

啊阿昕吶發表於2019-08-22
VueIDE

下載vue-video-player

 npm install vue-video-player --save
複製程式碼

在main.js檔案引入

import VideoPlayer from 'vue-video-player'
require('video.js/dist/video-js.css')
require('vue-video-player/src/custom-theme.css')
Vue.use(VideoPlayer)
複製程式碼

在頁面中引入

      <video-player
       ref="videoPlayer"
       class="video-player vjs-custom-skin"
       :playsinline="true"
       :options="playerOptions"
       @play="onPlayerPlay($event)"//監聽開始狀態
       @pause="onPlayerPause($event)"//監聽暫停狀態
      />
複製程式碼

在頁面中data中配置

  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', // 這裡的種類支援很多種：基本視訊格式、直播、流媒體等，具體可以參看git網址專案
             src: 'https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm' // url地址
           }
        ],
        hls: true,
        poster: 'http://pic33.nipic.com/20131007/13639685_123501617185_2.jpg', // 你的封面地址
        width: document.documentElement.clientWidth, // 播放器寬度
        notSupportedMessage: '此視訊暫無法播放，請稍後再試', // 允許覆蓋Video.js無法播放媒體源時顯示的預設資訊。
        controlBar: {
          timeDivider: true,
          durationDisplay: true,
          remainingTimeDisplay: false,
          fullscreenToggle: true // 全屏按鈕
        }
      },
複製程式碼

掛載視訊元件（非必須）不寫這一步也可以實現播放，新增這個是為了自定義按鈕使用

 computed: {
    player() {
      return this.$refs.videoPlayer.player//自定義播放
    }
  },
複製程式碼

官方文件

video.js:docs.videojs.com/docs/api/pl… vue-video-player:github.com/surmon-chin…

不需要相容m3u8的，以上就可以實現能播放 相容m3u8的需要下載

 npm install --save videojs-contrib-hls
複製程式碼

在檔案中引入

 import ‘videojs-contrib-hls’
 我這麼引入會出現找不到檔案，我沒找到問題所在，如果這麼引入不行，可以改為
 在main.js檔案中
   const hls = require('videojs-contrib-hls')
   Vue.use(hls)
 這樣就好了
複製程式碼

在頁面中測試

          {
            type: 'application/x-mpegURL', // 這裡的種類支援很多種：基本視訊格式、直播、流媒體等，具體可以參看git網址專案
            src:
              'https://cdn.letv-cdn.com/2018/12/05/JOCeEEUuoteFrjCg/playlist.m3u8' // url地址，從別的博主那看來的地址，親測可用
          }
複製程式碼

至此就可以播放了

相關文章