Video.js 与 Vue3 的集成答案

【问题标题】：Video.js integration with Vue3Video.js 与 Vue3 的集成
【发布时间】：2022-08-16 17:17:52
【问题描述】：

我有一个简单的 html 页面，它显示来自 nginx 服务器的 RTMP 流，它可以正常工作。这是工作的html代码：

<div id=\"middlebox\">
    <h2>RTMP Stream</h2>
    <video
        id=\"uav1-video\"
        class=\"video-js\"
        controls
        preload=\"auto\"
        width=\"640\"
        height=\"480\"
        data-setup=\"{}\">
        <source src=\"/hls/stream1.m3u8\" type=\"application/vnd.apple.mpegurl\" />
    </video>
  </div>

现在我想将此功能集成到 Vue3 应用程序中。我在视图组件的<template> 和<script> 标记中添加了以下内容：

<template>
<div id=\"app\" class=\"container\">
  <div>
     <h2>RTMP Stream</h2>
     <video
        id=\"my-video\"
        class=\"video-js\"
        controls
        preload=\"auto\"
        width=\"320\"
        height=\"180\"
        data-setup=\"{}\">
        <source src=\"/hls/stream1.m3u8\" type=\"application/vnd.apple.mpegurl\" />
      </video>
  </div>
</div>
</template>

<script>
export default {
    name : \'View\',

    data() {
        return{
        }
    },
    mounted() {
       let videoScript = document.createElement(\'script\')
       videoScript.setAttribute(\'src\', \'./js/video.js\')
       document.head.appendChild(videoScript)
    },
  }
</script>

使用上面的代码，只有视频播放器出现在 html 页面上，但我无法播放流。我没有看到在 html 页面中看到的大播放按钮。

当我在浏览器中检查 html 页面时，我看到以下异常：

Uncaught SyntaxError: Unexpected token \'<\'   js/video.js:1

我不确定如何解决这个问题。任何人都可以请帮忙。谢谢

js/video.js 是什么样的？那里好像出了什么问题？
问题在于 video.js 的路径。我正在使用 express.js 托管我的网页。将 video.js 复制到 public/js 文件夹后，问题得到解决。

标签： html vuejs3 video.js

【解决方案1】：

Videojs 有一种非常具体的设置方式。我还不能让它适应 Vue3 中的完全自定义。但是，如果您查看 videojs 网站并导航到 Vue 说明，请完全按照说明操作并设置组件，然后将该组件加载到您的页面中，它将起作用。

【讨论】：