前端开发 - 完美解决video.js和flv.js视频同时播放数量限制的问题，即浏览器针对同一域名的请求限制问题（解决flv.js/video.js在页面播放最多不超过6个问题、浏览器并发请求限制数

已于 2024-07-29 14:10:17 修改
阅读量3.1k 收藏 3
点赞数 25
分类专栏： 前端常见问题解决 前端组件与功能(开箱即用) 文章标签： video.js播放限制问题 flv.js同页面无法播放多个 视频播放请求被浏览器限制怎么办 解决flv播放超过6个就不行了 解决浏览器并发请求被阻止问题 vue/reactive/un 谷歌火狐浏览器同时播放视频
于 2024-01-20 10:56:37 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50545213/article/details/135712204
版权
在vue/reactive/uniapp等前端应用中，浏览器对同一域名的请求有限制，导致video.js和flv.js无法同时播放多个视频。本文介绍了两种解决方案：1) 通过后端配置HTTP/2.0或使用不同源；2) 监听多个HTTP端口以规避并发限制。方案2中，火狐浏览器实测能有效解决播放限制问题。
摘要由CSDN通过智能技术生成

问题说明

在vue/reactive/uniapp等前端开发中，浏览器有个机制，就是在对在同一时间、同一域名下的请求有数量限制(同源请求)，如果超过限制数量请求就会被阻止或阻塞，导致无法正常进行业务。

假设页面有很多视频需要同时播放，或者有许多请求需要同时进行等，就会造成问题，比如以下问题：【一个浏览器播放5个或者6个flv的视频就不能播放了】【video.js 无法在页面同时播放多个视频】等等。

本文提供多种解决方法，完美搞定。

方案1

其实，这种情况

了解本专栏 订阅专栏 解锁全文
街尾杂货店&
关注
  • 25
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
订阅专栏
videojs-record:video.js插件，用于记录音频视频图像文件
04-29
videojs记录一个插件，用于记录音频/视频/图像文件。文献资料该文档和示例可以在以下位置找到： :捐财务贡献者成为财务贡献者，并帮助我们维持我们的社区。 [贡献] 个人 组织机构与您的组织一起支持该项目。 您的...
video.js 一个页面同时播放多个视频的实例代码
10-17
主要介绍了video.js 一个页面同时播放多个视频的实例代码 ,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
flv.js无法在同一浏览器并行六路以上的问题（简单且有效）
luiio的博客
08-17 4733
因为nginx-rtmp-flv模块使用的不是http2.0，故大部分浏览器和nginx交互的时候，会因为并发数量的限制，导致最多只能六路并行。 也就是flv.js从同一个端口只能获取六路视频，多了就会交互失败。此时有多个解决方案： 1.有说联系nginx-rtmp-flv的作者，使用商业版带有http2.0。 2.有说修改浏览器配置，但是各个浏览器不是都可以修改的。 3.有说使用websocket替代http的，但是既有的方案未必支持更改。 4.有说使用反向代理，做几个新端口，代理一下原先的端口
浏览器只能播放6路http-flv流的解决方法
崔杰城的博客
05-05 1万+
一、现象 如下图所示，尝试在网页中播放超过6路http-flv流， 结果第7路无法播放。 在开发者工具中可以看到超过6个在线播放数目时，请求flv地址处于pending状态。 二、原因 导致该现象产生的原因为浏览器同域名请求的最大并发数限制。具体可以参考文章《浏览器同域名请求的最大并发数限制》 ...
前端---扫盲篇 更新中......
wyzsehun的博客
05-17 177
在实际做项目中，进入页面中会发出多次请求，会超过普通浏览器的6-8个，以前一直以为超出后的请求，就。，直到看到下面这篇相关限制介绍。
解决网页视频最大只能播放6路的问题
热门推荐
ilongsay的博客
07-01 1万+
解决网页视频最大只能播放6路的问题 一、前言 现在谷歌浏览器由于是同源设置，最大只能播放6路视频。如果是火狐浏览器还好，可以更改这个同源支持的路数，但是如果是谷歌的话就难受了，因为这个参数是写死到源码中的，所以要实现播放多路视频还需要走一些其他的方法。 二、思路 既然是同源策略，那么哪些会被视为同源，哪些又被视为非同源呢？网络上的一些教程解决方案都太复杂，要么就是引入新的技术，要么还得nginx编译支持http2.0技术，我搞java的怎么有那么多的精力去搞这种c语言编译？ 非同源：不同的ip或者是端口不同
浏览器针对同一域名的请求限制问题，flvjs与videojs视频播放同时播放数量限制，附解决方案
yy_onway的博客
10-10 5410
最近在开发视频直播播放系统的时候，发现不同浏览器对在同一时间，同一域名的请求有一定数量限制，超过限制数目的请求会被阻塞，具体限制数量是根据浏览器不同而不同，以下图片可以参考： 但是针对这种同源请求我又不可避免，以下是个人总结解决办法： 后端Nginx配置http2.0，具体配置方法百度：Nginx配置HTTP2.0，就行了。HTTP/2 的多路复用(Multiplexing) 则允许同时通过单一的 HTTP/2 连接发起多重的请求-响应消息，的就是变相的解决浏览器针对同一域名的请求限制阻塞问题。（没试过
用flv.js播放多路视频
小巧r的博客
03-22 1640
要添加多个视频流，您需要创建多个FLV实例，并将它们附加到不同的video元素上。您可以使用CSS来调整多个video元素的位置和大小，以适应您的布局需求。2.创建一个video标签。1.引入flv.js库。
浏览器播放超过6个flv视频时，有的播放不出来的问题
最新发布
八月林城的博客
07-19 493
【代码】浏览器播放超过6个flv视频时，有的播放不出来的问题。
解决http-flv视频在网页端最大只能播放6路的问题
weixin_54514751的博客
07-07 3431
现在谷歌浏览器由于是同源设置，这个参数是写死到源码中的；nginx-rtmp-flv模块使用的不是http2.0，故大部分浏览器和nginx交互的时候，会因为并发数量的限制，因此最大只能播放6路视频。实现：做几个新端口，代理一下原先的端口，做一个转发，这个方案是配置简单。2、使用websocket替代http的，但是既有的方案未必支持更改。3、修改浏览器配置，但是各个浏览器不是都可以修改的。1、使用商业版带有http2.0。
【js】js实现多个视频连续播放：
SunPeng的博客
01-01 1247
【js】js实现多个视频连续播放：
flv-demo_htmlflv.js拉流_flv.js自动播放_flv.js参数说明_flvjsjs拉流_flv直播流播放_源
10-04
`flv.js`是一个JavaScript实现的FLV（Flash Video）解码器，它允许在没有Flash支持的现代浏览器中播放FLV格式的视频流。以下是关于`flv.js`的详细知识点： 1. **FLV格式**：FLV是一种常见的视频流格式，广泛应用于...
哔哩哔哩flv.js，可内嵌播放flv格式的视频
12-29
通过该js可以播放flv的格式的视频。这里只提供两个引用的js，至于具体代码根据实际情况去了解。
dist.rar， Video.js发布dist Video.js 7.6.0、video.min.js、video-js.min.css，下载可直接使用
07-24
在版本迭代中，开发者通常会解决已知的问题，优化性能，并可能添加新的API或插件支持，以保持与现代浏览器的兼容性。因此，升级到7.6.0可以确保你获得最新的功能和更好的稳定性。 压缩包中的"video.min.js"是Video....
opencv-web-video:使用OpenCv.js在浏览器上进行基本视频处理的演示
05-14
使用OpenCV.js的视频处理演示 该演示包含通过OpenCV将视频流实时转换为灰度的简单视频处理示例。 camera.html使用来自摄像头设备的视频流 video.html使用从文件加载的视频 该演示中使用的视频是。
node-video-lib:Node.js视频库MP4和FLV解析器MP4构建器HLS多路复用器
05-13
Node.js视频库/ MP4和FLV解析器/ MP4构建器/ HLS多路复用器 局限性 该库仅适用于使用H.264 / H.265视频编解码器和AAC音频编解码器编码的MP4和FLV视频文件。 安装 $ npm install node-video-lib 用法 解析视频文件 ...
vue+flv.js 实时播放单个和多个视频流demo
QwQ621的博客
06-23 7777
安装 npm install --save flv.js 1.单个flv.js dome 复制代码 <template> <div> <video class="demo-video" ref="player" muted autoplay></video> </div> </template> <script> import flvjs from "flv.js"; export defau
浏览器并发请求资源限制
太阳的味道
08-21 891
浏览器并发请求资源限制一. 结论二. 页面加载三. 优化方案 一. 结论 1、浏览器的网络请求资源数是针对单一域名的。 2、不同浏览器，不同http协议版本允许的网络请求资源数是不一样的（具体自行百度），不过总的来说在2-8个之间。 二. 页面加载 假如一个页面有120个静态资源（css、js、img），并且所有资源都在一个域名下，使用的浏览器最大网络并行请求资源数是6，假设理想一些：所有请求时间...
一个浏览器播放5个或者6个flv的视频就不能播放了
u010148324的博客
07-12 2826
浏览器播放flv同源策略限制
vue-video-player和video.js区别
01-25
vue-video-player是基于video.js实现的视频播放器，它提供了更多的功能和定制选项。下面是vue-video-player和video.js的区别： 1. 功能和定制性：vue-video-player在video.js的基础上进行了扩展，提供了更多的功能和定制选项。它支持多种视频格式、自定义控制栏、全屏模式、播放速度调节等功能，可以满足更多的视频播放需求。 2. Vue.js集成：vue-video-player是专为Vue.js框架设计的，它提供了Vue组件的方式来使用视频播放器，可以更方便地在Vue项目中集成和使用。 3. 文档和社区支持：vue-video-player有自己的文档和社区支持，可以帮助开发者更好地理解和使用该播放器。而video.js也有自己的文档和社区支持，但vue-video-player在Vue.js社区中更受欢迎，有更多的资源和讨论。 总结来说，vue-video-player是基于video.js的视频播放器，它提供了更多的功能和定制选项，并且更适合在Vue.js项目中使用。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

街尾杂货店&

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值