Vue Video.js播放m3u8視頻流格式（video+videojs-contrib-hl）

1. Vue+Video.js播放效果圖

採用 m3u8 視頻流格式播放

2. npm安裝和引入

2.1 首先，我們需要在vue工程中安裝video.js相關依賴。

npm install --save video.js
npm install --save videojs-contrib-hls

2.2 然後，我們需要引入videojs的css文件，例如在main.js中引入

import 'video.js/dist/video-js.css'

2.3 接着，我們在需要播放視頻的頁面引入js對象

import videojs from "video.js";
import "videojs-contrib-hls";

3. vue 使用

3.1 指定一個video容器，例如：

<video
    id="my-video"
    class="video-js vjs-default-skin"
    controls
    preload="auto"
    width="500px"
>
    <source src="http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8" type="application/x-mpegURL" />
</video>

3.2 最後，我們在mounted節點初始化播放器：

methods:{
	getVideo() {
	   videojs(
	       "my-video",
	       {
	           bigPlayButton: false,
	           textTrackDisplay: false,
	           posterImage: true,
	           errorDisplay: false,
	           controlBar: true
	       },
	       function() {
	           this.play();
	       }
	   );
	}
}

mounted() {
    this.getVideo();
},

4. 動態設置video視頻的src地址

4.1 準備一個點擊動態切換的按鈕

<button @click="checkVideo()">點擊切換到CCTV3</button>

4.2 在methods方法中，通過動態設置src，在重新調用play()方法

checkVideo() {
    var myPlayer = videojs("my-video");
    myPlayer.src([
        {
            type: "application/x-mpegURL",
            src: "http://ivi.bupt.edu.cn/hls/cctv3hd.m3u8" //CCTV3頻道
        }
    ]);
    myPlayer.play();
}

5. Uncaught (in promise) TypeError: The element or ID supplied is not valid. (videojs)

關於報錯 Uncaught (in promise) TypeError: The element or ID supplied is not valid. (videojs) 的解決辦法。

問題：在我們正常使用的時候都是完全可以使用的，但是當我們有的時候需要把視頻放在彈窗el-dialog裏面顯示時，就會出現這個報錯問題。

原因：頁面未找到相應組件

解決：使用setTimeout延遲加載。

let _that = this;
setTimeout(() => {
	 _that.getVideo();
}, 300);

6. 附上一些 m3u8 源地址，方便測試使用

CCTV-1高清 http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8
CCTV-3高清 http://ivi.bupt.edu.cn/hls/cctv3hd.m3u8
CCTV-5高清 http://ivi.bupt.edu.cn/hls/cctv5hd.m3u8
CCTV-5+高清 http://ivi.bupt.edu.cn/hls/cctv5phd.m3u8
CCTV-6高清 http://ivi.bupt.edu.cn/hls/cctv6hd.m3u8
CCTV-8高清 http://ivi.bupt.edu.cn/hls/cctv8hd.m3u8
CHC高清電影 http://ivi.bupt.edu.cn/hls/chchd.m3u8
北京衛視高清 http://ivi.bupt.edu.cn/hls/btv1hd.m3u8
北京文藝高清 http://ivi.bupt.edu.cn/hls/btv2hd.m3u8
北京體育高清 http://ivi.bupt.edu.cn/hls/btv6hd.m3u8
北京紀實高清 http://ivi.bupt.edu.cn/hls/btv11hd.m3u8
湖南衛視高清 http://ivi.bupt.edu.cn/hls/hunanhd.m3u8
浙江衛視高清 http://ivi.bupt.edu.cn/hls/zjhd.m3u8
江蘇衛視高清 http://ivi.bupt.edu.cn/hls/jshd.m3u8
東方衛視高清 http://ivi.bupt.edu.cn/hls/dfhd.m3u8
安徽衛視高清 http://ivi.bupt.edu.cn/hls/ahhd.m3u8
黑龍江衛視高清 http://ivi.bupt.edu.cn/hls/hljhd.m3u8
遼寧衛視高清 http://ivi.bupt.edu.cn/hls/lnhd.m3u8
深圳衛視高清 http://ivi.bupt.edu.cn/hls/szhd.m3u8
廣東衛視高清 http://ivi.bupt.edu.cn/hls/gdhd.m3u8
天津衛視高清 http://ivi.bupt.edu.cn/hls/tjhd.m3u8
湖北衛視高清 http://ivi.bupt.edu.cn/hls/hbhd.m3u8
山東衛視高清 http://ivi.bupt.edu.cn/hls/sdhd.m3u8