解决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拆过,怪不得正常哇

相关推荐
Yhame.18 分钟前
【使用层次序列构建二叉树(数据结构C)】
c语言·开发语言·数据结构
言之。24 分钟前
【Go语言】RPC 使用指南(初学者版)
开发语言·rpc·golang
小墨宝34 分钟前
js 生成pdf 并上传文件
前端·javascript·pdf
投笔丶从戎1 小时前
Kotlin Multiplatform--01:项目结构基础
android·开发语言·kotlin
www_pp_1 小时前
# 构建词汇表:自然语言处理中的关键步骤
前端·javascript·自然语言处理·easyui
YuShiYue2 小时前
pnpm monoreop 打包时 node_modules 内部包 typescript 不能推导出类型报错
javascript·vue.js·typescript·pnpm
杜小暑2 小时前
动态内存管理
c语言·开发语言·动态内存管理
想不明白的过度思考者2 小时前
Java从入门到“放弃”(精通)之旅——JavaSE终篇(异常)
java·开发语言
天天扭码2 小时前
总所周知,JavaScript中有很多函数定义方式,如何“因地制宜”?(ˉ﹃ˉ)
前端·javascript·面试
一个专注写代码的程序媛2 小时前
为什么vue的key值,不用index?
前端·javascript·vue.js