vue + videojs 處理 m3u8 的坑：

坑后面再說(shuō)，先讓m3u8運(yùn)行起來(lái)，

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

<link 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個(gè)東西，我覺(jué)得這幾個(gè)很重要！

第二步：然后在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()實(shí)例化：

var player;

player = videojs('hls-video');

補(bǔ)充：在methods中可以用：player.play()播放；player.pause()暫停。

坑來(lái)了！：

如果你第一次渲染，完全沒(méi)問(wèn)題，如果從這個(gè)頁(yè)面跳spa到別的頁(yè)面，再跳回來(lái)，bug出現(xiàn)了！

為什么會(huì)有紅字error？我做錯(cuò)了什么？

因?yàn)槟銢](méi)有銷毀這個(gè)東西！

在本頁(yè)面xxx.vue 中加上：

beforeDestroy: function () {

? ? player.dispose();

? },

完美解決！這個(gè)東西真的太坑了！

感謝大家的支持?。≈x謝