前端项目经验 · 前端进阶指南与面试(持续更新)

# 前端直播 ## 流格式 **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(); } ~~~