rtmp格式的视频直播要依赖flash播放器，要在浏览器设置flash允许，对用户很不友好，而且谷歌浏览器在2020年就不再支持flash了，考虑到以上因素，项目要求对原来的rtmp视频直播进行二次开发。

为什么使用flv？

几种视频格式对比

协议 httpflv rtmp hls

传输方式 http流 tcp流 http

视频封装格式 flv flv tag Ts文件

延时低(1s) 低(1s) 高(20s)

数据分段连续流连续流切片文件

Html5播放 flv.js播放不支持 (hls.js)

内存 301M 430M 205M

cpu 4.4% 11% 3%

RTMP: Real Time Messaging Protocol，底层基于TCP，在浏览器端依赖Flash，Adobe公司为Flash播放器和服务器之间音频、视频传输开发的开放协议。
HTTP-FLV: 基于HTTP流式IO传输FLV，依赖浏览器(video)支持播放FLV，可以更好的穿透防火墙等。
HLS: Http Live Streaming，苹果提出基于HTTP的流媒体传输协议。HTML5可以直接打开播放(Video)。

flv简介

flv.js是来自Bilibli的开源项目。它解析FLV文件喂给原生HTML5 Video标签播放音视频数据，使浏览器在不借助Flash的情况下播放FLV成为可能。

原理：flv.js只做了一件事，在获取到FLV格式的音视频数据后通过原生的JS去解码FLV数据，再通过Media Source Extensions API 喂给原生HTML5 Video标签。(HTML5 原生仅支持播放 mp4/webm/ogg 格式，不支持 FLV)

优势：由于浏览器对原生Video标签采用了硬件加速，性能很好，支持高清。同时支持录播和直播。去掉对Flash的依赖。

flv实战

引入flv.js：

flv地址链接: https://pan.baidu.com/s/17VorGFK_uNXvMCtfIlL6Ww 提取码: w84v

<script type='text/javascript' src="./static/flv.min.js"></script>

组件demo代码

<template>
    <div class="video-flv">
        <div class="video-box">
            <video id="videoElement" class="videoElement" controls autoplay  ref="videoElement">
                Your browser is too old which doesn't support HTML5 video.
            </video>
        </div>
        <div class="video-control"></div>
    </div>
</template>
<script>
// import './flv.min.js'
// import flvPlayer from 'flv.js'
export default {
    name:'videoFlv',
    props:{
        videoShow:{
            type:Boolean,
            default:true,
        },
        videoSrc:{
            type:String,
            default:'http://www.lb50.cn/LIveUrl/TYUrl.Asp?1412.flv',
            // default:''
        },
    },
    data(){ 
       return{
            playerElement:null,
            flvPlayer:null,
            // | enableStashBuffer | 是否开启播放器端缓存 |
            // | stashInitialSize  | 播放器端缓存        | 
            // | isLive            | 是否为直播流        |
            // | hasAudio          | 是否播放声音        |
            // | hasVideo          | 是否播放画面        |
        }
    },
    destroyed(){
        this.flvDestroy();
    },
    mounted(){
        this.$nextTick(()=>{
            if(this.videoShow&&this.videoSrc){
                this.videoInit();
            }
        })
    },
    methods:{
        videoInit(){
            // debugger
            this.playerElement = this.$refs.videoElement;
            if (flvjs.isSupported()) {
                this.flvPlayer = flvjs.createPlayer({
                    type: 'flv',
                    "isLive": true,     
                     url: this.videoSrc,//<==自行修改
                });
                // videoElement：h5 video 元素
                  this.flvPlayer.attachMediaElement(this.playerElement); 
                  this.flvPlayer.load(); //加载
                 this.flvPlay();
              }
        }, 
       flvPlay(){
            this.flvPlayer.play();
        },
        flvDestroy(){
            this.flvPlayer.pause();
            this.flvPlayer.unload();
            this.flvPlayer.detachMediaElement();
            this.flvPlayer.destroy();
            this.flvPlayer = null;
            this.playerElement = null;
        }
    },
    watch:{
        videoSrc(){
            console.log(this.videoSrc,'videoSrc');
            if(this.videoShow){
                this.$nextTick(()=>{
                    this.videoInit(); 
               }) 
           }
         },
    }
}
</script>
<style lang="less" scoped>
.video-flv{
    .video-box{
        width: 100%;
        height: 100%;
        .videoElement{
            width: 100%; 
           height: 100%;
        }
    }
}
</style>

父组件使用：

<videoFlv  :videoSrc='videoSrc2'></videoFlv>import videoFlv from './videoFlv.vue'
components:{    videoFlv,},
data(){
    return {
       videoSrc2:'https://d1--cn-gotcha03.bilivideo.com/live-bvc/881547/live_17561885_332_c521e483_4000.flv?cdn=cn-gotcha03&expires=1589187453&len=0&oi=2071683237&pt=web&qn=400&trid=fea3ebd2af1245db8cfe1cfa79dcf1e1&sigparams=cdn,expires,len,oi,pt,qn,trid&sign=7391db44c218f9d1c3e58e86fed5b1a2&ptype=0&platform=web&pSession=hR73bApm-a9Q7-4m5N-DbS4-HyjBTtFKQmdy'
    }
}

效果展示：

flv视频源问题：flv视频直播源太难找了，找了好多都是不能用的，后来灵机一动在bilibili上面看了一下netweor，找到了他的直播流原始地址，试着播放了一下没问题。

--------------------------------------------------------------------------------------------

git地址：https://github.com/aicai0/test_components.git

如有问题，欢迎探讨，如果满意，请手动点赞，谢谢！🙏

及时获取更多姿势，请您关注！！！