如何检查添加的自定义错误在 videojs 播放器中是否有效
How to check added custom errors are working in videojs player
我是 React JS 的新手,我尝试使用 videojs-errors 插件在 videoJS 播放器中添加自定义错误消息。我想检查覆盖的自定义错误是否有效。试图匹配相同类型的错误对象,但它显示错误“属性 'customErrors' is missing in type '{ 4: { headline: string; message: string; }; }[]' 但在类型 '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;
这是错误的快照。
enter image description here
那么如何检查我的自定义错误消息是否有效?
您只需像这样更新 interface PlayerErrors
:
export interface PlayerErrors {
[key: number]: {
headline: string,
message: string,
};
}
我是 React JS 的新手,我尝试使用 videojs-errors 插件在 videoJS 播放器中添加自定义错误消息。我想检查覆盖的自定义错误是否有效。试图匹配相同类型的错误对象,但它显示错误“属性 'customErrors' is missing in type '{ 4: { headline: string; message: string; }; }[]' 但在类型 '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;
这是错误的快照。
enter image description here
那么如何检查我的自定义错误消息是否有效?
您只需像这样更新 interface PlayerErrors
:
export interface PlayerErrors {
[key: number]: {
headline: string,
message: string,
};
}