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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/40706.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

贝叶斯学习中先验分布的详细解释

在贝叶斯学习中&#xff0c;先验分布&#xff08;Prior Distribution&#xff09;是一个非常重要的概念。它代表了在观察到任何数据之前&#xff0c;对未知参数的初始信念或知识。先验分布的选择通常基于领域知识、历史数据或者纯粹的假设。 文章目录 先验分布的含义先验分布的…

dtpay聚合支付系统在跨境支付场景中技术及业务方案

1 什么是跨境支付 我们从两个维度来分析什么是跨境支付&#xff0c;第一个维度我们从资金流向分析&#xff0c;国内的消费者在境外进行消费对于国内资金流来说这属于资金流出&#xff0c;这是跨境支付的第一种应用场景。第二个场景国外游客在国内进行消费&#xff0c;这属于资…

昇思25天学习打卡营第11天 | LLM原理和实践:基于MindSpore实现BERT对话情绪识别

1. 基于MindSpore实现BERT对话情绪识别 1.1 环境配置 # 实验环境已经预装了mindspore2.2.14&#xff0c;如需更换mindspore版本&#xff0c;可更改下面mindspore的版本号 !pip uninstall mindspore -y !pip install -i https://pypi.mirrors.ustc.edu.cn/simple mindspore2.2…

js的作用域链

function test(){} 运行期上下文&#xff1a;当函数执行时&#xff0c;会创建一个称为执行期上下文的内部对象。一个执行期上下文定义了一个函数执行时的环境&#xff0c;函数每次执行时对应的执行上下文都是 独一无二的&#xff0c;所以多次调用一个函数对导致创建多个执行上下…

Linux 安装pdfjam (PDF文件尺寸调整)

跟Ghostscript搭配使用&#xff0c;这样就可以将不同尺寸的PDF调整到相同尺寸合并了。 在 CentOS 上安装 pdfjam 需要安装 TeX Live&#xff0c;因为 pdfjam 是基于 TeX Live 的。以下是详细的步骤来安装 pdfjam&#xff1a; ### 步骤 1: 安装 EPEL 仓库 首先&#xff0c;安…

springboot集成tika解析word,pdf,xls文件文本内容

介绍 Apache Tika 是一个开源的内容分析工具包&#xff0c;用于从各种文档格式中提取文本和元数据。它支持多种文档类型&#xff0c;包括但不限于文本文件、HTML、PDF、Microsoft Office 文档、图像文件等。Tika 的主要功能包括内容检测、文本提取和元数据提取。 官网 https…

python入门详细介绍

Python 是一种广泛使用的高级编程语言&#xff0c;以其清晰的语法和代码可读性而闻名。它支持多种编程范式&#xff0c;包括面向对象、命令式、函数式和过程式编程。Python 由 Guido van Rossum 于1989年底发明&#xff0c;第一个公开发行版发行于1991年。 Python 的特点&…

java-初始化Map快捷装数据

*单个Map创建 Map<String, String> stringStringMap Collections.singletonMap("reason", "同意");使用匿名类初始化Map List<Map<String,Object>> mapListnew ArrayList<>();mapList.add(new HashMap<String, Object>() {…

基于STM32F407ZG的FreeRTOS移植

1.从FreeRTOS官网中下载源码 2、简单分析FreeRTOS源码目录结构 2.1、简单分析FreeRTOS源码根目录 &#xff08;1&#xff09;Demo&#xff1a;是官方为一些单片机移植FreeRTOS的例程 &#xff08;2&#xff09;License&#xff1a;许可信息 &#xff08;3&#xff09;Sourc…

《中国品牌网》揭秘格行品牌崛起之路:如何从混乱市场中杀出重围,领跑未来?

在随身WiFi行业乱象丛生的背景下&#xff0c;格行品牌凭借其独特的经营理念和长期主义的精神&#xff0c;逐渐崭露头角&#xff0c;成为行业的领跑者。近日&#xff0c;《中国品牌网》记者专访了格行品牌的创始人刘永先先生&#xff0c;就他的经营理念、市场策略以及未来展望进…

如何在 Odoo 16 中对 Many2Many 字段使用 Group by

Many2many 字段与 Many2one 字段类似,因为它们在模型之间建立了新的关系。在Odoo 16中,您无法按 many2many 字段分组,因为可以使用 many2many 记录选择任何记录。当您使用 many2many 字段给出 group by 过滤器时,您将遇到断言错误。 介绍如何在 Odoo 16 中使用 Many2Many…

AIGC | 为机器学习工作站安装NVIDIA 4070 Ti Super显卡驱动

[ 知识是人生的灯塔&#xff0c;只有不断学习&#xff0c;才能照亮前行的道路 ] 0x00 前言简述 话接上篇《AIGC | Ubuntu24.04桌面版安装后必要配置》文章&#xff0c;作为作者进行机器学习的基础篇&#xff08;筑基期&#xff09;&#xff0c;后续将主要介绍机器学习环境之如何…

6-google::protobuf命名空间下常用的C++ API----repeated_field.h

#include <google/protobuf/repeated_field.h> namespace google::protobuf 所生成的协议消息类使用RepeatedField和RepeatedPtrField来操作重复字段。 这些类与STL的vector非常相似&#xff0c;但包含了许多优化&#xff0c;这些优化被发现特别适用于协议缓冲区的情况。…

【优化论】基本概念与细节

优化论&#xff08;Optimization Theory&#xff09;是数学和计算机科学中一个重要的分支&#xff0c;旨在寻找给定问题的最优解。这个领域的应用非常广泛&#xff0c;从经济学、工程学到机器学习、金融等各个领域都有其踪迹。我们可以通过一系列直观的比喻来理解优化论的基本概…

Python编译器的选择

了解如何使用一个集成开发环境&#xff08;IDE&#xff09;对于 Python 编程是非常重要的。IDE 提供了代码编辑、运行、调试、版本控制等多种功能&#xff0c;可以极大地提升开发效率。以下是一些流行的 Python IDE 和代码编辑器的介绍&#xff0c;以及如何开始使用它们&#x…

Python + 在线 + 文生音,音转文(中文文本转为英文语音,语音转为中文文本)

开源模型 平台&#xff1a;https://huggingface.co/ars-语言转文本: pipeline("automatic-speech-recognition", model"openai/whisper-large-v3", device0 ) hf: https://huggingface.co/openai/whisper-large-v3 github: https://github.com/openai/wh…

kettle中调用restful接口时的SSL信任证书问题

1、找第三方获取SSL证书&#xff0c;&#xff08;本案例为自签名证书&#xff09; C:\Program Files\Java\jdk1.8.0_241\jre\lib\security>keytool -import -alias aliyun-maven -keystore cacerts -file E:\entSoftware\aliyun-maven.cer 输入密钥库口令: …………一堆证…

ubuntu系统盘扩容

目录 1 介绍 2 步骤 2.1 关闭虚拟机 2.2 编辑虚拟机设置 2.3 设置扩展大小 2.4 打开虚拟机 2.5 找到磁盘管理 2.6 扩展 1 介绍 本部分主要记述怎么给ubuntu系统盘扩展存储容量&#xff0c;整个过程相对简单&#xff0c;扩容方式轻松、容易。 2 步骤 2.1 关闭虚拟机 2…

前端面试题(CSS篇三)

一、简单介绍使用图片 base64 编码的优点和缺点。 base64是一种图片处理格式&#xff0c;通过特定的算法将图片编码为一长串字符串&#xff0c;在页面显示的时候&#xff0c;可以使用该字符串来代替图片的url属性。 使用base64的优点: 减少一个图片的http请求 使用base64的缺点…

电脑f盘的数据回收站清空了能恢复吗

随着信息技术的飞速发展&#xff0c;电脑已成为我们日常生活和工作中不可或缺的设备。然而&#xff0c;数据的丢失或误删往往会给人们带来极大的困扰。尤其是当F盘的数据在回收站被清空后&#xff0c;许多人会陷入绝望&#xff0c;认为这些数据已无法挽回。但事实真的如此吗&am…