flv.js播放卡顿，短线重连，包括九宫格，四宫格，一宫格

最新推荐文章于 2023-08-03 11:02:53 发布

弯腰捡代码

最新推荐文章于 2023-08-03 11:02:53 发布

阅读量1.1k

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/weixin_38655115/article/details/124469496

版权

解决flv.js断网重连等一些问题
这里简单做一下改动
请看下图
在这里插入图片描述
这张图片就展示了宫格以及设备等一些问题

附上解决断流以及卡顿的代码，各位前端的精英，看看就能懂

this.$nextTick(() => {
                itemData.forEach((item, index) => {
                    if (item != 'null') {
                        if (flvjs.isSupported()) {
                            let player = this.players;
                            let videoElement = document.getElementById('video' + index);
                            player = flvjs.createPlayer(
                                {
                                    type: 'flv', //=> 媒体类型 flv 或 mp4
                                    isLive: true,
                                    hasAudio: false,
                                    url: item.url //=> 视频流地址
                                },
                                {
                                    enableWorker: false, //不启用分离线程
                                    enableStashBuffer: false, //关闭IO隐藏缓冲区
                                    reuseRedirectedURL: true, //重用301/302重定向url，用于随后的请求，如查找、重新连接等。
                                    autoCleanupSourceBuffer: true //自动清除缓存
                                }
                            );

                            player.attachMediaElement(videoElement); //=> 绑DOM
                            if (item.url !== '' && item.url !== null) {
                                player.load();
                                player.play();
                            }

                            //定时方法是为了用户离开页面视频是实时播放的,暂停按钮无用
                            setInterval(function () {
                                // console.log(videoElement.buffered,"idididid");
                                if (videoElement.buffered.length > 0) {
                                    const end = videoElement.buffered.end(0); // 视频结尾时间
                                    const current = videoElement.currentTime; //  视频当前时间
                                    const diff = end - current; // 相差时间
                                    // console.log(diff);
                                    const diffCritical = 4; // 这里设定了超过4秒以上就进行跳转
                                    const diffSpeedUp = 1; // 这里设置了超过1秒以上则进行视频加速播放
                                    const maxPlaybackRate = 4; // 自定义设置允许的最大播放速度
                                    let playbackRate = 1.0; // 播放速度
                                    if (diff > diffCritical) {
                                        //  this.flvPlayer.load();
                                        // console.log("相差超过4秒，进行跳转");
                                        videoElement.currentTime = end - 1.5;
                                        playbackRate = Math.max(1, Math.min(diffCritical, 16));
                                    } else if (diff > diffSpeedUp) {
                                        // console.log("相差超过1秒，进行加速");
                                        playbackRate = Math.max(1, Math.min(diff, maxPlaybackRate, 16));
                                    }
                                    videoElement.playbackRate = playbackRate;
                                    if (videoElement.paused) {
                                        videoElement.play();
                                    }
                                }
                            }, 1000);
                            player.on(flvjs.Events.ERROR, (errorInfo) => {
                                if (errorInfo.code == 404) {
                                    this.$message.error('流媒体代理服务未找到，请检查');
                                }
                                if (player) {
                                    this.reloadVideo(player);
                                }
                            });

                            this.players.push(player);
                        } else {
                            this.$message.error('不支持flv格式视频');
                        }
                    }
                });

        reloadVideo(flvPlayer) {
            this.destoryVideo(flvPlayer);
            let spl = this.spilt;
            if (spl == 1) {
                this.dataplayer( this.firstping);
            } else if (spl == 4) {
                this.dataplayer( this.secendping);
            } else {
                this.dataplayer(this.threeping);
            }
            
        },
        destoryVideo(flvPlayer) {
            flvPlayer.pause();
            flvPlayer.unload();
            flvPlayer.detachMediaElement();
            flvPlayer.destroy();
            flvPlayer = null;
        },

这个就是多个视频处理的方法，欢迎各位大佬指正，哈哈哈