[JavaScript知识库]vue项目 flvjs封装组件 flvjs视频demo案例

npm构建装依赖

flvjs中文文档，谢谢博主提供，地址为：点击此地址

网上我也找到一个，不知道哪个兄弟放上去的
http://1011.hlsplay.aodianyun.com/demo/game.flv 谢谢此兄弟。

拿到上面的地址，可以在npm官网搜索flv.js
如图：
1.步骤一

2.步骤二

<template>
    <!-- flv 视频插件播放 autoplay muted  -->
    <div class="videoGroup">
        <video :id="flvInfo.id" controls muted width="100%" height="100%" class="flvVideo"></video>
    </div>
</template>

<script>
import flvjs from 'flv.js'
export default {
    components:{
        VideoTitle
    },
    props:{
        flvInfo:{
            type:Object,
            default:()=>{
                return {}
            }
        }
    },
    data(){
        return {
            flvPlayer:null,
            changeLampPost:false,
        }
    },
    created(){},
    mounted(){
        this.init();    //初始化
    },
    methods:{
        // 初始化
        init(){
            let _this = this;
            if (flvjs.isSupported()) {
                var videoElement = document.getElementById(this.flvId);
                this.flvPlayer = flvjs.createPlayer({
                    type: 'flv',    //媒体类型，'flv'或'mp4'    string
                    isLive: true,   //数据源是否为实时流 boolean
                    hasAudio: false,    //流是否有音频轨道  boolean
                    // lazyLoad:true,      //如果有足够的数据可播放，则中止http连接。
                    stashInitialSize: 128,// 减少首桢显示等待时长   //指示IO暂存缓冲区的初始大小。默认值为384KB。指出合适的尺寸可以改善视频负载/搜索时间。
                    url: this.flvInfo.url    //表示媒体URL，可以以'https(s)'或'ws(s)'（WebSocket）开头
                });
                this.flvPlayer.attachMediaElement(videoElement);
                try{
                    // 解决The play() request was interrupted by a new load request.报错 加了setTimeout就好了
                    setTimeout(function() {
                        _this.flvPlayer.load();
                        // _this.flvPlayer.play();
                        // 这里主要处理 加载过程中 有播放按钮  突然用鼠标点击暂停的时候报错. 或者更换时候的时候 没有加载完 也会报这个错. 这个错依然还在,
                        // Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause().
                        if(_this.flvPlayer.play() !== undefined){
                            _this.flvPlayer.play().then(()=>{
                                _this.flvPlayer.play()
                            }).catch(()=>{
                                console.error("突然暂停了")
                            })
                        }
                    }, 500);
                }catch(err){
                    console.error("flv组件播放时报错",err)
                }
                //优化
                // 【重要事件监听】http请求建立好后，该事件会一直监听flvjs实例
                this.flvPlayer.on(flvjs.Events.STATISTICS_INFO, (res) => {
                  if (_this.changeLampPost) { // 离开路由或切换设备
                    // 销毁实例
                    _this.flvPlayer.pause();
                    _this.flvPlayer.unload();
                    _this.flvPlayer.detachMediaElement();
                    _this.flvPlayer.destroy();
                    _this.flvPlayer= null;
                  }
                })
            }
        },
    },
    destroyed(){
        let _this = this
        setTimeout(() => {
            _this.flvPlayer.pause()
            _this.changeLampPost = true; // 这里视频做了优化处理 
        },500)
    },
    watch:{}
}
</script>

<style lang="less" scoped>
.videoGroup{
    width:100%;
    height:100%;
    position:relative;
    overflow: hidden;
}
.videoGroup:hover .vg_title{
    top:0px;
}

.flv_box{
    width: 100%;
    height: 100vh;
}
.flvVideo{  //视频撑满
    object-fit: fill;
}
</style>