react-jw-player

Question

我已将 react-jw-player 用于我的一个React项目。

我需要为静音/取消静音视频播放器添加一个自定义按钮。我已经实现了 mobx 来更新选项值。它会更新值，但不会反映jwPlayer。

首先，我尝试了不使用 mobx 的情况，并且可以重新加载整个播放器，因此我的播放列表从第一个开始播放。因此，我决定在其中设置 mobx 。它会更新数据，但不会反映在播放器上。

PlayerStore.js

class PlayerStore {

    @observable isMute = true;

    @action muteUnmuteVideo = (isMute) => {
        this.isMute = isMute;
    }
}

var Store = new PlayerStore();

export default Store;

MuteButton.js

@inject('Store')

export class MuteButton extends Component {

    constructor(props) {

        super(props);
        this.state = {isMute: true};

        // This binding is necessary to make `this` work in the callback
        this.handleClick = this.handleClick.bind(this);
    }

    handleClick() {

        this.setState(prevState => ({
            isMute: !prevState.isMute
        }));

        this.props.Store.muteUnmuteVideo(this.state.isMute);
    }

    render() {
        return (

            <button onClick={this.handleClick} className="btn mute-btn" id="mute-btn">Click Here</button>
        );
    }
}
export default MuteButton;

CustomJwPlayer.js

@inject('Store')
@observer
export class CustomJwPlayer extends Component {

    render() {

        const  { Store, playlist, isAutoPlay, isMuted, customProps } = this.props;

        return (

            <div className="full-height" >

                <ReactJWPlayer
                    className="single-player"
                    playerId='my-unique-id'
                    playerScript='https://content.jwplatform.com/libraries/4hK3AT2X.js'
                    playlist={playlist}
                    isAutoPlay={isAutoPlay}
                    isMuted={Store.isMute}
                    customProps={{ 
                        controls: false,
                        repeat: true,
                        defaultBandwidthEstimate: 400000,
                        stretching: 'fill',
                        preload: 'auto',
                        volume: 100,
                        width: '100%',
                        height: '100%',
                    }}
                />
            </div>
        );
    }
}
export default CustomJwPlayer;

Answer 1

尝试使用setState回调

handleClick() {
    this.setState({
        isMute: !this.state.isMute
    }, () => {
    this.props.Store.muteUnmuteVideo(this.state.isMute);
  });
}