Angular 8中使用video.js报错：video_js__WEBPACK_IMPORTED_MODULE_1__ is not a function

这个错误我之前帮不少开发者排查过，核心原因是导入方式和Video.js的模块导出结构不匹配，在Angular 8的TypeScript环境下，直接用import * as videojs from 'video.js'没法正确拿到Video.js的主函数入口。下面给你一步步的解决方案：

1. 调整导入方式 #

把原来的命名导入改成默认导入，这是最关键的一步：

// 替换原来的 import * as videojs from 'video.js';
import videojs from 'video.js';

如果TypeScript报错“找不到模块的默认导出”，就新建或修改src/typings.d.ts文件，添加类型声明：

declare module 'video.js' {
  export default function videojs(el: Element, options?: Record<string, any>, ready?: () => void): any;
}

2. 确认Video.js版本兼容性 #

Angular 8属于比较早期的版本，建议安装和它兼容的稳定版Video.js，比如6.x系列：

npm install video.js@6.6.3 --save

3. 检查模板中的视频元素 #

确保你的组件模板里有正确的#myplayer标记的video元素，还要加上Video.js的默认样式类：

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

4. 修正播放器初始化代码 #

调整后的初始化方法可以加上基础配置和错误处理，避免意外崩溃：

initPlayer() {
  if (!this.videoElement.nativeElement) return;
  
  try {
    const player = videojs(this.videoElement.nativeElement, {
      controls: true,
      autoplay: false,
      preload: 'auto',
      fluid: true
    });
    
    // 这里可以添加视频源配置
    player.src({
      type: 'video/mp4',
      src: '你的视频文件地址'
    });
  } catch (error) {
    console.error('Video.js播放器初始化失败:', error);
  }
}

额外配置：引入Video.js样式 #

别忘了在angular.json的styles数组里添加Video.js的CSS文件，不然播放器样式会乱掉：

"styles": [
  "src/styles.css",
  "node_modules/video.js/dist/video-js.min.css"
]

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