vue + videojs 處理 m3u8 的坑

vue + videojs 處理 m3u8 的坑：

坑後面再說，先讓m3u8運行起來，

第一步：首先vue的index.html 引入

<link href="http://cdn.bootcss.com/video....; rel="stylesheet" />

<script src="http://cdn.bootcss.com/video....;></script>

<script src="http://cdn.bootcss.com/videoj...;></script>

這3個東西，我以爲這幾個很重要！

---

第二步：而後在xxx.vue使用：

<video

id="hls-video"

    width="1024"

    height="576"

    class="video-js vjs-default-skin"

    playsinline

    webkit-playsinline

    controls

    preload="auto"

    x-webkit-airplay="true"

    x5-video-player-fullscreen="true"

    x5-video-player-typ="h5"

  >

    <source

      src="your addr"

      type="application/x-mpegURL"

    >

  </video>

---

第三步：js中的mouted()實例化：

var player;

player = videojs('hls-video');

補充：在methods中能夠用：player.play()播放；player.pause()暫停。

坑來了！：

若是你第一次渲染，徹底沒問題，若是從這個頁面跳spa到別的頁面，再跳回來，bug出現了！

爲何會有紅字error？我作錯了什麼？
由於你沒有銷燬這個東西！

在本頁面xxx.vue 中加上：

beforeDestroy: function () {

player.dispose();

},

完美解決！這個東西真的太坑了！

感謝你們的支持！！謝謝