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