The Issue:

Background: I am porting a jQuery app with video.js with plugins. to TypeScript React app.

背景：我正在移植一个jQuery应用程序，该应用程序带有带有插件的Video.js。来打印Reaction应用程序。

Trying to use video.js current version of 8.3.0 with TypeScript and 3rd-party plug-ins causes type errors such as: Property 'playlist' does not exist on type 'Player'.

尝试将VIDEO.js当前版本的8.3.0与TypeScrip和第三方插件一起使用会导致类型错误，例如：属性‘PlayList’不存在于类型‘Player’上。

Simplified Example

It should be noted, this setup actually works in production with multiple plugins, however TS server throws errors.

需要注意的是，这种设置实际上可以在生产中使用多个插件，但是TS服务器会抛出错误。

import { useRef } from 'react';
import videojs from 'video.js';
import type Player from 'video.js/dist/types/player';
import 'videojs-playlist';

const videoElement = document.createElement('video-js');
const playerRef = useRef<Player | null>(null);
const playlist = [{...}];
const options = {...};

const player = (playerRef.current = videojs(videoElement, options));

player.autoplay(false);
player.playlist(playlist); // TS Error: Property 'playlist' does not exist on type 'Player'
player.playlist.autoadvance(0); // TS Error: Property 'playlist' does not exist on type 'Player'

Previous Research, Attempts at Resolution and Potential Cause

This is actually a common issue for folks wanting to use video.js with TypeScript and 3rd-party plug-ins. While there viable solutions for this scenario using video.js version 7.X, none of the following solutions work for me on video.js 8.3.

这实际上是那些想要通过TypeScrip和第三方插件使用Video.js的人的常见问题。虽然有一些可行的解决方案可以使用VIDEO.js版本7.x来解决这个场景，但是下面的解决方案都不适合我在VIDEO.JS 8.3上使用。

I believe this happened when they changed how their types work.

我相信这是在他们改变了他们的类型工作方式时发生的。

Initially, we used DefinitelyTyped types for 7.X:

最初，我们对7.x使用DefinitelyTyped类型：

npm install --save @types/video.js

Then we used the included types in 7.X:

然后我们使用7.X中包含的类型：

import { VideoJsPlayer, VideoJsPlayerOptions } from 'video.js';

In the 8.X release they changed their types:

在8.x版本中，它们更改了类型：

import Player from 'video.js/dist/types/player';

I found previous success in another app that uses video.js 7.X with these solutions, however neither of these solutions work for me on 8.3:

我在另一个应用程序中发现了之前的成功，它使用了VIDEo.js 7.x和这些解决方案，但这两个解决方案都不适合我在8.3版本上使用：

• Video.js Heart TypeScript

  视频.js心脏打字稿

  
  



• StackOverflow - Videojs plugins with typescript

  StackOverflow--带有文字脚本的视频插件

  
  

I took at look at the video.js player.d.ts file for clues, however I wasn't able to figure it out from there.

为了寻找线索，我看了视频.js player.d.ts文件，但我没能从那里弄明白。

I also have tried this custom d.ts file example, even throwing in some anys just to get it up and running, but no luck:

我也试过这个自定义d.ts文件的例子，甚至扔在一些anys只是为了让它启动和运行，但没有运气：

// videojs-playlist.d.ts
import Player from 'video.js/dist/types/player';

declare module 'video.js' {
  export interface Player {
    playlist(options: any): void; // Also tried playlist(playlist?: { options: any }): void;
  }
}

I asked co-pilot and it gave me a bunch of depreciated, not functional code, not compatible with video.js version 8.X.

我询问了co-Pilot，它给了我一堆过时的代码，而不是功能代码，与Video.js版本8.x不兼容。

Falling back to 7.X is not a real option for this project.

对于这个项目来说，退回到7.x不是一个真正的选择。

Again, functionality works, however TS server continues to complain. I suspect the solution is ultimately in a custom.d.ts file. Hopefully someone has been able to figure this out for the version 8.X of video.js. Thank you in advance.

再说一次，功能是有效的，但TS服务器继续抱怨。我怀疑最终的解决方案在一个定制的.d.ts文件中。希望有人能够在VIDEO.js的8.x版本中解决这个问题。提前谢谢您。