解决video.js在demo中可以播放,在已有项目中无限waiting的问题

video.js的是有推荐的和react一起使用的写法的:https://videojs.com/guides/react/

但是这个写法在demo中可以正常播放,在放在现有的项目中则播不出来,也不报错,就是log里显示on waiting后就什么动静都没有了,页面显示在转圈圈,换一种写法用 class 组件也都一样,在demo中能播,在项目里播不了

可能是这个guide太老了,video.js的github readme总是最新的了吧,虽然是html+js script的:https://github.com/videojs/video.js

这个可以播!

很神奇,我加了一个按钮,将它的onclick改成之前play的事件回调,这也是可以的

查了一下,有关react和videojs的issue,好像以前有一段时间,videojs和react 18不大适配,react是虚拟dom,video则要在真实dom上操作,导致两边各论各的,videojs操作的时候发现dom已经没了。正好,现在的情况就是在HTML写的真实dom正常,react写的虚拟video不行,我以为是这个问题,然而没想到,路才走到一半......

好不容易解决了commonjs与esm冲突,用js模块找到html video dom进行操作,结果还是不行

怀疑可能是什么奇怪的时序问题或者CPU内存占用过高导致的,所以在原本该play的时间点,手动点刚才写在html的button,结果能播,没有一点问题

npm包版本,videojs是一样的,其他基本一样,react都是18.几,当然没有很精确的相同。项目里比demo多一些其他的依赖,主要是这些不一样的地方我也不敢改呀!老项目,不敢动,一点都不敢动

还是从代码层面入手吧。把App.tsx改成demo一样的,播不了,入口的index.jsx也改成一样的,播不了,什么都一样,为什么播不了呢?!

最后发现,package.json里start的脚本不一样,demo是用的react-script start,老项目是自己写的start.js脚本。我连忙给老项目装了一个react-script,结果竟然能播了!!

看来问题出在这里了,我连忙向领导说了,可惜领导很忙,不懂我的开心 ┑( ̄Д  ̄)┍

直接把node_modules里react-script的start.js替换掉项目的start.js,发现还是有很多不一样的,改的非常痛苦,主要是import了一堆webpack的配置,这些webpack的配置也是自己写的,内部的实现和react-script用的它们里面的webpack也不一样,export的格式都不一样,我们还加了很多乱七八糟的东西,不敢删

改着改着突然想到会不会其实原因不在script里面,而在webpack配置里面呢

于是搜到了这个:

https://videojs.com/guides/webpack/

可恶的webpack!怎么还会破坏包的!!

js 复制代码
// eslint-disable-next-line import/no-webpack-loader-syntax
import videojs from "!video.js";

改成这样之后,所有问题都解决了

回看之前的现象,一切都有了解释,html版,里面起作用的是<script src="//vjs.zencdn.net/8.3.0/video.min.js"></script>,完整的video.js脚本,而不是import videojs from video.js 模块,没被webpack拆过,怪不得正常哇

相关推荐
阿让啊3 分钟前
bootloader+APP中,有些APP引脚无法正常使用?
c语言·开发语言·stm32·单片机·嵌入式硬件
饕餮ing7 分钟前
C++的UDP连接解析域名地址错误
开发语言·c++·udp
莲动渔舟8 分钟前
Nyquist插件基础:打印格式化字符串(LISP语言)
开发语言·lisp·音频处理·audacity
满怀101520 分钟前
Python入门(5):异常处理
开发语言·python
攀小黑23 分钟前
Java 多线程加锁 synchronized 关键字 字符串当做key
java·开发语言
每次的天空33 分钟前
Kotlin 作用域函数:apply、let、run、with、also
android·开发语言·kotlin
Mintopia36 分钟前
Three.js粒子系统开发实战:从基础到性能优化
前端·javascript·three.js
小林熬夜学编程36 分钟前
【高并发内存池】第八弹---脱离new的定长内存池与多线程malloc测试
c语言·开发语言·数据结构·c++·算法·哈希算法
Promise52036 分钟前
大屏"跑马灯" 长列表性能优化
前端·javascript
子玖37 分钟前
初始化项目前的准备
前端·javascript·vue.js