reactjs - 如何检查添加的自定义错误在 videojs 播放器中是否有效

Question

我是 React JS 的新手，我尝试使用 videojs-errors 插件在 videoJS 播放器中添加自定义错误消息。我想检查覆盖的自定义错误是否有效。试图匹配相同类型的错误对象，但它显示错误“属性 'customErrors' is missing in type '{ 4: { header: string; message: string; }; }[]' but required in type 'PlayerErrors' 。 ”

这是我为添加错误对象的预期类型而创建的接口。

PlayerErrors.ts

export interface PlayerErrors{
    customErrors: {
        [key: number]: {
          headline: string;
          message: string;
        }
      }
}

这是 App.tsx

import React, { Component } from 'react';
import videojs, { VideoJsPlayer } from 'video.js';
import { PlayerCallbacks, PlayerOptions, PlayerErrors } from './interfaces';
import 'videojs-contrib-quality-levels';
import 'videojs-max-quality-selector';
import 'videojs-youtube/dist/Youtube.min.js';
import './plugins/Cuepoints/Core';
import './App.css';
import 'video.js/dist/video-js.css';
import 'videojs-max-quality-selector/dist/videojs-max-quality-selector.css';
import 'videojs-errors/dist/videojs-errors.css';
import 'videojs-errors';

type Props = {
  options: PlayerOptions;
  playerId: string;
  customErrors?: PlayerErrors;
} & PlayerCallbacks;

class App extends Component<Props> {
  player?: VideoJsPlayer;

  currentTime = 0;
  startPosition = 0;
  previousTime = 0;

  componentDidMount() {
    this.initPlayer();

    this.registerCallbacks();
  }

  componentDidUpdate(prevProps: Props) {
    if (prevProps !== this.props && this.props.options.sources !== prevProps.options.sources) {
      this.player?.src(this.props.options.sources ?? []);
      this.player?.poster(this.props.options.poster ?? '');
    }

    if (prevProps !== this.props && this.props.options.theme !== prevProps.options.theme) {
      if (!this.props.options.theme) {
        this.player?.removeClass(prevProps.options.theme ?? '');
      } else {
        prevProps.options.theme && this.player?.removeClass(prevProps.options.theme ?? '');
        this.player?.addClass(this.props.options.theme ?? '');
      }
    }
  }

  componentWillUnmount() {
    this.dispose();
  }

  initPlayer = () => {
    const { playerId, options } = this.props;
    if (!options.playbackRates) {
      options.playbackRates =
        options.sources &&
        options.sources.length &&
        options.sources[0].type &&
        options.sources[0].type === 'video/youtube'
          ? [0.5, 0.75, 1, 1.5, 2]
          : [0.5, 0.75, 1, 1.5, 2, 3];
    }

    this.player = videojs(playerId, options);
    this.player.maxQualitySelector({ displayMode: 1 });

    this.player?.errors(this.props.customErrors);
  };

  dispose = () => {
    if (this.player) {
      this.player.dispose();

      this.player = undefined;
    }
  };

  render() {
    return (
      <div style={{ width: '100%', height: '100%' }}>
        <div data-vjs-player>
          <video
            id={this.props.playerId}
            className={`video-js ${this.props.options.bigPlayButtonCentered && 'vjs-big-play-centered'}`}></video>
        </div>
      </div>
    );
  }
}

export default App;

这是我用来检查自定义错误消息的文件。

    import React, { Component } from 'react';
    import MediaPlayer from './App';
    import { PlayerOptions, PlayerErrors } from './interfaces';
    
    type Props = {};
    
    type State = {
      options: PlayerOptions;
      customErrors?: PlayerErrors;
    };
    
    class Standalone extends Component<Props, State> {
      player: any;
    
      state: State = {
        customErrors: [{
          4: {
            headline: ' headline: This is an override for the generic MEDIA_ERR_SRC_NOT_SUPPORTED',
            message: 'message: This is a custom error message'
          }}],
        options: {
          theme: '',
          controls: true,
          html5: true,
          fill: true,
          bigPlayButtonCentered: true,
          techOrder: ['html5', 'youtube'],
          sources: [
            {
              src:
                'https://path.m3u8'
            }
          ] //[{ type: 'video/youtube', src: 'https://www.youtube.com/watch?v=L5CV53wCWO0' }]
        }
      };
 render() {
    return (
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100vh' }}>
        <div style={{ width: '1200px', height: '600px' }}>
          <MediaPlayer
            options={this.state.options}
            customErrors={this.state.customErrors}
            playerId={'mediaPlayerStandalone'}
            onReady={this.onReady}
            onPlay={this.onPlay}
            onPause={this.onPause}
            onTimeUpdate={this.onTimeUpdate}
            onSeeked={this.onSeeked}
            onSeeking={this.onSeeking}
            onEnd={this.onEnd}
          />
        </div>
      </div>
    );
  }
}

export default Standalone;

这是错误的快照。

在此处输入图像描述

那么如何检查我的自定义错误消息是否有效？

标签： reactjsvideo.js

Answer 1

您只需interface PlayerErrors像这样更新：

export interface PlayerErrors {
  [key: number]: {
    headline: string,
    message: string,
  };
}