将 video.js 导入 nuxt.js 应用程序不起作用

Question

我正在尝试在 Nuxt 应用程序中使用 video.js。我运行了

yarn add video.js

，它安装了 video.js，我可以在

package.json

中看到它

在我的页面

video.vue

我添加了

import videojs from 'video.js'

vscode 返回此错误：

找不到模块“video.js”的声明文件。 '../node_modules/video.js/dist/video.cjs.js' 隐式具有 'any' 类型。 尝试

npm i --save-dev @types/video.js

（如果存在）或添加包含

declare module 'video.js';

的新声明（.d.ts）文件

我遵循了 vue 官方页面上的示例：https://videojs.com/guides/vue/

Answer 1

在 Nuxt 3 中导入 video.js

npm install --save-dev video.js

模板：

<template>
 <v-container>
  <video ref="videoPlayer" width="500" class="video-js"></video>
 </v-container>
</template>

剧本：

 <script setup>
  import videojs from "video.js";
  import 'video.js/dist/video-js.css'
  import { ref, onMounted } from 'vue'
  const videoPlayer = ref()
  let player = null;
  onMounted(() =>{
    player = videojs(videoPlayer.value, {
      autoplay: false,
      controls: true,
      sources: [
        {
          src: 'video-link',
          type: 'video/mp4'
        }
      ]
    }, function onPlayerReady() {
      console.log('Player is ready!');
    });
  })
</script>