【音视频、chatGpt】h5页面最小化后,再激活后视频停住问题的解决

news/2024/7/7 19:54:29

目录

现象

观察

 解决


现象

  页面有时候要切换,要最小化;短时间或者几个小时内切换回来,视频可以正常续上;而放置较长时间,几个小时或者一晚上,切换回来后,视频可能卡死

观察

切换页面:

几个小时内都比较正常,不会卡死 

 放置一个晚上后,页面卡死,使用wireshark观察,流量依旧在,而视频流也在传

根据打印发现有几个缓冲组(解决后的代码打印)

 

 解决

document.addEventListener('visibilitychange', function(){
        var bufferedTimeRanges = _SELF.video_object.buffered;

        for (var i = 0; i < bufferedTimeRanges.length; i++) {
            var start = bufferedTimeRanges.start(i);
            var end = bufferedTimeRanges.end(i);
            console.log("已缓冲时间段:" + start + " - " + end);
        }
        if (_SELF.videoBeginTime) {
          _SELF.IntervelNum = parseInt((new Date().getTime() - _SELF.videoBeginTime) / 40)
          _SELF.delayData = []
        }
        if (_SELF.pagePaused) {
          var videoBuffered = _SELF.video_object.buffered;
          console.log("videoBuffered.length",videoBuffered.length)
          if (videoBuffered.length > 0) {
            let videoEnd = videoBuffered.end(videoBuffered.length-1);
            console.log("videoEnd - _SELF.video_object.currentTime",videoEnd ,_SELF.video_object.currentTime)
            if (videoEnd - _SELF.video_object.currentTime > 0.15) {
              _SELF.video_object.currentTime = videoEnd - 0.1;
            }
          }
          var audioBuffered = _SELF.audio_object.buffered;
          if (audioBuffered.length > 0) {
            let audioEnd = audioBuffered.end(audioBuffered.length-1);
            if (audioEnd - _SELF.audio_object.currentTime > 0.15) {
              _SELF.audio_object.currentTime = audioEnd - 0.1;
            }
          }
          _SELF.pagePaused = false;
        }
      });


http://lihuaxi.xjx100.cn/news/1433790.html

相关文章

07-2_Qt 5.9 C++开发指南_二进制文件读写(stm和dat格式)

文章目录 1. 实例功能概述2. Qt预定义编码文件的读写2.1 保存为stm文件2.2 stm文件格式2.3 读取stm文件 3. 标准编码文件的读写3.1 保存为dat文件3.2 dat文件格式3.3 读取dat文件 4. 框架及源码4.1 可视化UI设计4.2 mainwindow.cpp 1. 实例功能概述 除了文本文件之外&#xff…

谈谈Spring与字节码生成技术

Java程序员几乎都了解Spring。 它的IoC&#xff08;依赖反转&#xff09;和AOP&#xff08;面向切面编程&#xff09;功能非常强大、易用。而它背后的字节码生成技术&#xff08;在运行时&#xff0c;根据需要修改和生成Java字节码的技术&#xff09;就是一项重要的支撑技术。 …

系列六、Springboot操作RocketMQ

一、同步消息 1.1、发送&接收简单消息 1.1.1、发送简单消息 /*** 测试发送简单消息*/ Test public void sendSimpleMessage() {SendResult result rocketMQTemplate.syncSend("BOOT_TOPIC_SIMPLE", "我是一个简单消息");// 往[BOOT_TOPIC_SIMPLE]主…

【深度学习】再谈向量化

前言 向量化是一种思想&#xff0c;不仅体现在可以将任意实体用向量来表示&#xff0c;更为突出的表现了人工智能的发展脉络。向量的演进过程其实都是人工智能向前发展的时代缩影。 1.为什么人工智能需要向量化 电脑如何理解一门语言&#xff1f;电脑的底层是二进制也就是0和1&…

图解java.util.concurrent并发包源码系列——深入理解ReentrantReadWriteLock读写锁,看完可以吊打面试官

图解java.util.concurrent并发包源码系列——深入理解ReentrantReadWriteLock读写锁&#xff0c;看完可以吊打面试官 ReentrantReadWriteLock的作用ReentrantReadWriteLock的原理ReentrantReadWriteLock源码解析构造方法获取写锁和读锁对象计算读锁被持有数和写锁被持有数的位移…

网页爬虫中常用代理IP主要有哪几种?

各位爬虫探索者&#xff0c;你是否有想过在网页爬虫中使用代理IP来规避限制实现数据自由&#xff1f;在这篇文章中&#xff0c;作为一名IP代理产品供应商&#xff0c;我将为你揭示常见的网页爬虫代理IP类型&#xff0c;让你在爬虫的世界中游刃有余&#xff01; 一、免费公开代理…

umi快速搭建中后台管理系统(命令行创建和区块开发的区别)

后台管理系统 命令行创建新项目命令行效果图配置文件package.json umi3构建区块readme.md主页面页面布局页面布局的一些参数总结 区块开发步骤三级目录 命令行创建新项目 命令行 1、 npm i ant-design/pro-cli -g 2、 pro create demo_spacemv_managementsys 3、 umi 3 simpl…

从一道面试题来学习前台进程和后台进程、孤儿进程和僵尸进程

1、面试题介绍 以前面试&#xff0c;面试官问了一个问题&#xff0c;大意是&#xff1a; 我们在终端中&#xff0c;通过执行 python main.py 命令&#xff0c;会启动一台前台进程直到程序结束。现在我还是想通过执行 python main.py &#xff0c;启动一个后台进程&#xff0c;…