В этой статье объясняется, как добавить конечную заставку или оверлей в конце видео на videojs. Существует несколько плагинов videojs для конечного экрана, таких как videojs-endcard и videojs -hibitedvideoendcap. Однако в то время эти плагины не были совместимы с react. Поэтому мы решили реализовать его в React. Этот пример также можно использовать как пример реализации videojs в React js. (videojs в реакции js)
Сначала был создан видеокомпонент.
Затем компонент был импортирован на нужную страницу.
Данные конечной заставки могут быть взяты из внутреннего вызова с необходимыми деталями, которые упоминаются как свойство endScreenData в компоненте Player.
Затем, вернувшись в видеокомпонент, в состояние isEnd добавлен флаг.
this.state = { isEnd: false };
После, чтобы изменить флаг при срабатывании события «завершено», было реализовано следующее.
this.player.on('ended', () => {
this.setState({ isEnd: true });
});
Наконец, при рендеринге был добавлен оверлей, когда состояние isEnd истинно.
Вот окончательный результат.
Конечный компонент видео
Надеюсь, это было полезно для вас.
Хочу поблагодарить Zhang Ji Zhen за помощь в реализации.
