vue + videojs 处理 m3u8 的坑

框架

浏览数:86

2019-6-29

vue + videojs 处理 m3u8 的坑:

坑后面再说,先让m3u8运行起来,

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

<link href="http://cdn.bootcss.com/video.js/6.0.0-RC.5/alt/video-js-cdn.min.css" rel="stylesheet" />

 <script src="http://cdn.bootcss.com/video.js/6.0.0-RC.5/video.js"></script>

 <script src="http://cdn.bootcss.com/videojs-contrib-hls/5.3.3/videojs-contrib-hls.js"></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();

  },

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

感谢大家的支持!!谢谢

作者:PETER