# 前端直播 ## 流格式 **HLS、RTMP、HTTP-FLV** [https://blog.csdn.net/liuyuqin1991/article/details/79310080](https://blog.csdn.net/liuyuqin1991/article/details/79310080) [https://savokiss.com/tech/web-live-tech-with-vue.html](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](http://vdn-hls.xuetangx.com/xuetanglive/%22+data.live_stream_id+%22/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](http://vdn-flv.xuetangx.com/xuetanglive/%22+data.live_stream_id+%22.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(); } ~~~