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(); } ```