HLS、RTMP、HTTP-FLV https://blog.csdn.net/liuyuqin1991/article/details/79310080 https://savokiss.com/tech/web-live-tech-with-vue.html >1、HLS --> 移動端 .m3u8 >>url: "http://vdn-hls.xuetangx.com/xuetanglive/"+data.live_stream_id+"/index.m3u8" type: "application/x-mpegURL" >2、RTMP >>依賴flash技術 url: "rtmp://vdn-rtmp.xuetangx.com/xuetanglive/"+data.live_stream_id type: "rtmp/flv" ``` //初始化視頻 let player = videojs('container',{ //像data-setup那樣設置的參數 },function onPlayerReady(){ //視頻播放器初始化完畢，就會調用這個回調函數 this.src({ src: "rtmp流地址", type:'rtmp/flv' }); }); ``` >3、HTTP-FLV --> .flv >>依賴flash技術. 也是當前主流直播網站所用的格式 url: "http://vdn-flv.xuetangx.com/xuetanglive/"+data.live_stream_id+".flv" type: "video/x-flv" > 4、切換不同種類視頻源 >> ``` player.ready(function() { var myPlayer = this; myPlayer.reset(); if (scope.type == 'hls') { console.log('hls'); myPlayer.src({ type: "application/x-mpegURL", src: scope.url }); } else { myPlayer.src({ type: "rtmp/flv", src: scope.url }); console.log('rtmp'); } myPlayer.load(scope.url); myPlayer.play(); }); 我們借助 player.src() 方法就是實現，根據不同的類型設置 src 的type 就可以。但是每次我們更改地址的時候，記得調用一下 player.reset() 方法會重置播放器 。要不會有問題，切換不了。 ``` 搭建rtmp直播流服務之4:videojs和ckPlayer開源播放器二次開發(播放rtmp、hls直播流及普通視頻) https://blog.csdn.net/eguid_1/article/details/51898912 ### videojs常用api /* * 根據videoJS官方文檔編寫的播放器常用操作 */ ``` //獲取當前類型 function getCurrentType(idnex) { return idnex.currentType(); } //獲取當前播放地址 function getCurrentAddr(index) { return index.currentSrc(); } //獲取當前播放時間 function getCurrentTime(index) { return index.currentTime(); } //獲取當前網絡狀態 function networkState(index) { return index.networkState(); } //修改播放地址 function setsrc(index, url, type) { index.src({ type : type, src : url }); } //重載播放器 function reset(index) { index.reset(); index.load(); } //播放 function play(index) { index.play(); } //暫停 function pause(index) { index.pause(); } ```