Angular构建Ionic应用中使用video.js的TypeScript导入问题

我之前也碰到过一模一样的问题，一开始用npm装完video.js后TypeScript老是报错找不到模块，后来才摸清楚门道，给你整理了两种可行的方案，你可以根据自己的情况选：

方案一：通过npm安装（推荐，符合Angular项目规范） #

1. 安装核心依赖和类型定义
   先把之前可能装过的video.js卸载掉，然后重新安装video.js和它的TypeScript类型声明包——这步是解决TS识别问题的关键：

   npm uninstall video.js
   npm install video.js @types/video.js --save
   

2. 在组件中导入并初始化播放器
   在需要使用视频播放器的Angular/Ionic组件里，直接导入video.js和它的样式，然后在生命周期钩子中初始化：

   import videojs from 'video.js';
   import 'video.js/dist/video-js.css'; // 必须导入样式，不然播放器会乱码
   import { Component, ElementRef, ViewChild, OnInit, OnDestroy } from '@angular/core';
   
   export class VideoPlayerComponent implements OnInit, OnDestroy {
     private player: videojs.Player;
     @ViewChild('videoElement') videoElement: ElementRef;
   
     ngOnInit() {
       // 初始化播放器，配置项可以根据需求调整
       this.player = videojs(this.videoElement.nativeElement, {
         controls: true,
         autoplay: false,
         preload: 'auto',
         fluid: true, // 适配Ionic的响应式布局
       });
     }
   
     ngOnDestroy() {
       // 组件销毁时务必销毁播放器，避免内存泄漏
       if (this.player) {
         this.player.dispose();
       }
     }
   }
   

3. 在模板中添加视频元素
   在组件的HTML模板里，添加带video-js类的video标签，并用#videoElement标记供组件获取DOM引用：

   <video #videoElement class="video-js vjs-big-play-centered"></video>
   

方案二：通过script标签引入（你当前使用的方式） #

如果坚持用本地script文件引入，需要让TypeScript识别全局的videojs变量：

1. 添加全局变量声明
   在项目的src目录下新建（如果没有的话）typings.d.ts文件，添加以下内容：

   declare var videojs: any;
   

   这样TS就不会再报错找不到videojs变量了。

2. 在组件中使用全局videojs
   不需要导入，直接使用全局变量初始化播放器，逻辑和方案一类似：

   import { Component, ElementRef, ViewChild, OnInit, OnDestroy } from '@angular/core';
   
   export class VideoPlayerComponent implements OnInit, OnDestroy {
     private player: any;
     @ViewChild('videoElement') videoElement: ElementRef;
   
     ngOnInit() {
       this.player = videojs(this.videoElement.nativeElement, {
         controls: true,
         autoplay: false,
         preload: 'auto',
       });
     }
   
     ngOnDestroy() {
       if (this.player) {
         this.player.dispose();
       }
     }
   }
   

3. 补充样式引入
   别忘了在index.html里添加video.js的样式文件引用：

   <link rel="stylesheet" href="assets/css/video-js.css">
   

额外提醒（针对Ionic） #

Ionic页面有自己的生命周期，建议把播放器初始化逻辑放在ionViewDidEnter钩子中，确保页面完全渲染后再操作DOM：

ionViewDidEnter() {
  this.player = videojs(this.videoElement.nativeElement, { /* 你的配置 */ });
}

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