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();

},

完美解决！这个东西真的太坑了！

感谢大家的支持！！谢谢