Property 'frames' does not exist on type 'VideoJsPlayer'.

[samueleastdev]

Hi All,

I am trying to get this to work in a react project I have an example here.

https://github.com/samueleastdev/videojs-issue-28418

I am using the following code to import.

import * as React from 'react';
import videojs from 'video.js';

import 'video.js/dist/video-js.css';

import 'videojs-frames';

class App extends React.Component {
  private player?: videojs.Player;
  private videoNode?: HTMLVideoElement;

  constructor() {
    super({});
    this.player = undefined;
    this.videoNode = undefined;
  }
  componentDidMount() {
    this.player = videojs(this.videoNode, {
      autoplay: false,
      controls: true,
      sources: [
        {
          src: 'http://vjs.zencdn.net/v/oceans.mp4',
          type: 'video/mp4',
        },
      ],
    }).ready(function onReady() {
      console.log('onPlayerReady', this);
      
    }); 
    this.player.frames();
  }

  // destroy player on unmount
  componentWillUnmount() {
    if (this.player) {
      this.player.dispose();
    }
  }
  public render() {
    return (
      <div className="App">
        <div data-vjs-player>
          <video
            ref={(node: HTMLVideoElement) => (this.videoNode = node)}
            className="video-js"
          />
        </div>
      </div>
    );
  }
}

export default App;

I just get the error.

 Property 'frames' does not exist on type 'VideoJsPlayer'.

Any suggestions

[brandonocasey]

I don't think this.player.frames is a function

[gkatsev]

This is a typescript issue. It doesn't like our plugin system and will complain about it.