Vue3集成Video.js播放RTMP/HLS流报错无法播放问题求助

控制台抛出的Uncaught SyntaxError: Unexpected token '<' js/video.js:1已经指向了核心问题：

• 你写的./js/video.js路径错误，服务器没有找到对应的JS文件。Vue单页应用默认配置了路由兜底，所有找不到的资源请求都会返回index.html页面，浏览器把HTML内容当JS解析，第一个字符就是<，直接报语法错误，video.js根本没加载成功，自然不会渲染大播放按钮，也没法播放流。
• 除此之外你的实现还有3个隐藏问题：
  • 动态插入script标签时没有监听加载完成事件，哪怕路径正确，video.js加载完成前DOM已经渲染完毕，靠data-setup属性触发的自动初始化逻辑不会执行。
  • 没有引入video.js对应的CSS样式文件，播放器控件、播放按钮的样式都不会生效。
  • Vue场景下不适合用data-setup自动初始化，这个机制是给原生静态HTML页面设计的，页面首次加载时扫描DOM完成初始化，Vue动态渲染组件的时机和它不匹配，很容易初始化失败。

推荐方案：通过npm依赖引入（最稳定，避免路径问题） #

1. 安装依赖，包含video.js核心库和官方HLS播放支持插件（非Safari浏览器播放m3u8流必须装，不需要额外引入hls.js）：

   npm install video.js @videojs/http-streaming
   

2. 改写组件代码，删掉video标签上的data-setup属性，在Vue生命周期里手动初始化、销毁播放器，避免内存泄漏：

   <template>
   <div id="app" class="container">
     <div>
        <h2>RTMP Stream</h2>
        <video
           id="my-video"
           class="video-js vjs-big-play-centered"
           controls
           preload="auto"
           width="320"
           height="180">
           <source src="/hls/stream1.m3u8" type="application/vnd.apple.mpegurl" />
         </video>
     </div>
   </div>
   </template>
   
   <script>
   import videojs from 'video.js'
   import 'video.js/dist/video-js.css'
   export default {
     name: 'View',
     data() {
       return {
         player: null
       }
     },
     mounted() {
       // DOM挂载完成后初始化播放器
       this.player = videojs('my-video', {
         autoplay: false,
         controls: true
       })
     },
     beforeUnmount() {
       // 组件销毁时销毁播放器实例，防止内存泄漏
       if (this.player) {
         this.player.dispose()
       }
     }
   }
   </script>
   

备选方案：静态资源引入 #

如果你不想用npm安装，坚持用本地静态JS文件：

1. 把video.js和video-js.css放到Vue项目的public/js目录下，不要放在src目录里。
2. 引用时用根路径（开头加/，不要用./开头的相对路径，避免被路由拦截返回HTML），等脚本加载完成后再手动初始化播放器：

   mounted() {
     // 先加载CSS
     const cssLink = document.createElement('link')
     cssLink.rel = 'stylesheet'
     cssLink.href = '/js/video-js.css'
     document.head.appendChild(cssLink)
   
     // 加载JS
     const videoScript = document.createElement('script')
     videoScript.src = '/js/video.js'
     // JS加载完成后再初始化
     videoScript.onload = () => {
       this.player = videojs('my-video')
     }
     document.head.appendChild(videoScript)
   },
   beforeUnmount() {
     if (this.player) this.player.dispose()
   }
   

• 资源配置完后先在浏览器Network面板检查video.js的请求，确认响应内容是JS代码而非HTML，状态码200，就说明路径配置正确。
• 如果播放时出现CORS跨域报错，需要在nginx的HLS服务配置里添加跨域响应头，允许前端域名访问m3u8索引文件和ts分片资源。

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