vue使用video.js解決m3u8視訊播放格式

小周sri的碼農發表於2019-07-29
VueIDEJS

今天被這個關於m3u8視訊播放不了搞了一下午，這個專案所有的視訊流都是m3u8格式的，後臺給我們返回的都是m3u8格式的視訊流，解決了好長時間，看了好多部落格，只有這個部落格給我點啟發，去解決這個問題，請檢視。會使用兩種方法來解決這個問題

  • 第一種方法

1.在vue中安裝下面這些外掛

cnpm install  video.js --save
ccnp  install videojs-contrib-hls --save

　網上有說video.js版本太高不能使用，不能使用7以上的版本，用5版本的，最後結果測試，根本不需要什麼低版本的高版本的，7版本以上的沒有任何問題。小編已經親自試驗過

2.頁面中使用

<video
          id="myVideo"
          class="video-js vjs-default-skin vjs-big-play-centered"
          controls
          preload="auto"
          style='width: 100%;height: auto'
          :poster="poster"
        >
        </video>

　2.1 poster設定封面圖，我在計算屬性判斷了一下，，如果後臺上傳封面圖，就顯示，如果沒有上傳就顯示預設的圖片，這個是根據自己的需求來解決

computed: {
    poster: function() {
      return this.posterSrc
        ? this.posterSrc
        : require("./../assets/images/coveImg.png");
    }
  },

2.2在methods中定義一個方法，getViewList用於請求資料，拿到視訊流

2.3下載之後在頁面中引入，如果引入video.js有問題，就在html檔案引入

<script src="//vjs.zencdn.net/7.3.0/video.min.js"></script>

這樣就可以了

2.3video.js配置項

getVideo() {
      this.myVideo = videojs("myVideo", {
        bigPlayButton: true,
        textTrackDisplay: false,
        posterImage: false,
        errorDisplay: false,
        hls: {
          withCredentials: true
        }
      });
    }

最重要的一點，標紅的，一定一定要使用，下載了安裝包，一定要在這個使用，才能失效。不然播放不了m3u8視訊格式

  mounted() {
    this.$nextTick(() => {
      this.getVideo();
    });
    this.getViewList();
  },

定義的兩個方法，放在mounted

  • 第二種方法

上面是實現播放m3u8,接下來說第二種實現方法

<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
地址請看   https://www.npmjs.com/package/hls.js/v/canary

引入上面那個檔案

只需要寫這麼多，然後再mounted生命週期呼叫，但是這個沒有video.js樣式好看，都可以解決播放不了m3u8視訊的格式問題。

以上都是來解決m3u8視訊播放不了的問題，

相關文章