React项目中jwplayer未定义错误及自托管集成方法咨询

1. 修正脚本标签的类型属性 #

你当前的<script>标签使用了type="text/jsx"，这会导致浏览器无法正确解析JWPlayer的JS文件。将其改为text/javascript：

<script
  src="/jwplayer/jwplayer.js"
  type="text/javascript"
></script>
<script type="text/javascript">
  jwplayer.key = "+1bANyiZkLQznP2yV8ky+2NgQqiQmMg3/Sc0tJdhWUPtP51/8zGnxqqw=";
</script>

2. 验证自托管文件路径与完整性 #

• 确保你已将完整的JWPlayer自托管包解压到React项目的public/jwplayer目录下，目录需包含jwplayer.js等核心文件
• 直接访问http://localhost:3000/jwplayer/jwplayer.js，确认能正常加载文件，若无法访问则检查路径是否正确

3. 确保脚本加载顺序与可用性 #

可以通过监听脚本加载事件，确保jwplayer对象初始化后再赋值密钥：

<script src="/jwplayer/jwplayer.js" type="text/javascript"></script>
<script type="text/javascript">
  const jwScript = document.querySelector('script[src="/jwplayer/jwplayer.js"]');
  jwScript.addEventListener('load', function() {
    jwplayer.key = "+1bANyiZkLQznP2yV8ky+2NgQqiQmMg3/Sc0tJdhWUPtP51/8zGnxqqw=";
  });
</script>

4. React组件内正确初始化播放器 #

React组件需等待DOM挂载完成后再调用jwplayer，避免DOM未就绪导致的错误。以函数组件为例：

import { useEffect, useRef } from 'react';

export default function JWPlayer() {
  const playerContainer = useRef(null);

  useEffect(() => {
    if (!playerContainer.current || !window.jwplayer) return;

    // 初始化播放器
    const player = window.jwplayer(playerContainer.current).setup({
      file: "你的视频URL",
      width: "100%",
      height: 480,
      controls: true
    });

    // 组件卸载时销毁播放器
    return () => {
      player.remove();
    };
  }, []);

  return <div ref={playerContainer}></div>;
}

内容的提问来源于stack exchange，提问作者Steven