解决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！怎么还会破坏包的！！

// 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拆过，怪不得正常哇

原文地址：https://blog.csdn.net/weixin_43544179/article/details/140211558

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！