React Player 控件 - HTML5 视频事件处理程序无法识别视频对象

Question

我是React框架的新手，所以我仍在学习JSX语法和模式。

我正在尝试将自定义视频控件 UI 挂接到 HTML5 视频元素中，但无济于事。

我可以通过简单的onClick函数获得单独的PLAY和PAUSE按钮来控制视频，但是当我将PLAY/PAUSE作为切换元素与组件组合时，我无法弄清楚如何将PLAY/PAUSE图标切换事件与我的handlePlay((/handlePause((函数相结合。

我敢肯定这是我错过的新手步骤，但我几乎被困在这里......任何反馈将不胜感激。

*编辑：在"播放控件"中添加了此行(onClick={isPlaying ？ console.log('PLAYING！'( ： console.log('暂停！'(} (

控制台.log(( 在单击事件时打印"正在播放！"和"暂停！"事件，正如预期的那样...但是如果我将控制台.log((替换为对"handlePlay(("和"handlePause(("函数的调用......什么也没发生。

我错过了什么？

下面列出了我的代码示例：

import React, { Component } from 'react';
import { PlaybackControls, PlayButton, PauseButton, FormattedTime, 
TimeMarker, ProgressBar } from 'react-player-controls';
import customControls from './customControls.scss';
export default class Video01 extends Component {
constructor(props) {
super(props);
this.state = {
isPlayable: true,
isPlaying: false,
showPrevious: false,
hasPrevious: false,
showNext: false,
hasNext: false
}

this.handlePlay = this.handlePlay.bind(this)
this.handlePause = this.handlePause.bind(this)
}
componentDidMount() {
}
componentWillMount() {
}
/**********************************************************************
Video Playback Controls
**********************************************************************/
handlePlay () {
if (this.props.isPlayable) {
this.props.onPlaybackChange(true)
this.refs.video01Ref.play()
}
}
handlePause () {
this.props.onPlaybackChange(false)
this.refs.video01Ref.pause()
}
render() {
return (
<div>
<div className={styles.container} data-tid="container">
<div className={styles.videoContainer} data-tid="videoContainer">
<video ref="video01Ref" src="./video/myVideo.webm" type="video/webm" />
</div>
</div>
<div className={customControls.ControlsWrapper}>
<PlaybackControls className={customControls.PlayButton, customControls.PauseButton}
isPlayable={this.state.isPlayable}
isPlaying={this.state.isPlaying}
showPrevious={false}
hasPrevious={false}
showNext={false}
hasNext={false}
onPlaybackChange={isPlaying => this.setState(Object.assign({}, this.state, { isPlaying: isPlaying }))}
onClick={isPlaying ? console.log('PLAYING!') : console.log('PAUSED!')}
/>
<ProgressBar className={customControls.ProgressBar} />
<TimeMarker className={customControls.TimeMarker} />
</div>
</div>
);
}
}

Answer 1

我取得了一些进展，所以我决定回答我自己的问题，希望能激发一些优秀的撒玛利亚人 React/JSX 大师的反馈。

我仍然熟悉 React/JSX 语法，但我真的很喜欢我到目前为止学到的东西。模块化方法肯定更有效，因为它与内存/优化有关......它使查明错误和错误变得更加容易。话虽如此...以下是我到目前为止的发现：

• 我想出了如何通过外部组件(自定义播放器控件(播放/暂停视频。
• 我了解到，使用单个(嵌套(组件来设计我的布局是明智的，而不是一个大混乱(即，并且是组合成一个类的单个组件，然后将其插入到我的组件中，该组件插入到我的(

我仍在尝试弄清楚如何在组件之间传递道具。状态和属性的概念对我来说很有意义，但我对如何正确执行工作流缺乏一些基本的了解。我确信这与 React 生命周期有关，但这是一个完全独立的对话。

现在，下面发布了我的更新代码的示例。我可以使用外部组件(自定义播放器控件(播放/暂停 HTML5 视频，但如何将 props 元素传递回自定义控件组件？例如，如何将默认道具(即"当前时间"、"持续时间"、"搜索"、"结束"=>映射到"当前时间"、"总时间"、"onSeek"等(？

请原谅我的冗长咆哮，但任何反馈将不胜感激。这是我更新的代码：

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { PlaybackControls, PlayButton, PauseButton, FormattedTime, TimeMarker, TimeMarkerType, ProgressBar } from 'react-player-controls';
import customControls from './customControls.scss';
export default class CustomControls01 extends Component {
constructor(props) {
super(props);
this.state = {
isEnabled: true,
isPlayable: true,
isPlaying: false,
showPrevious: false,
hasPrevious: false,
showNext: false,
hasNext: false,
totalTime: 28,
currentTime: 0,
bufferedTime: 0,
isSeekable: true,
lastSeekStart: 0,
lastSeekEnd: 0,
markerSeparator: ' / ',
firstMarkerType: TimeMarkerType.ELAPSED,
secondMarkerType: TimeMarkerType.DURATION,
}
this.handlePlay = this.handlePlay.bind(this)
this.handlePause = this.handlePause.bind(this)
}
componentDidMount() {
}
componentWillUnmount() {
}
/**********************************************************************
Video Playback Controls
**********************************************************************/
handlePlay() {
vid01.play()
}
handlePause() {
vid01.pause()
}
render() {
const { isPlayable, isPlaying, showPrevious, showNext, hasPrevious, hasNext, totalTime, currentTime, markerSeparator, firstMarkerType, secondMarkerType, bufferedTime, isSeekable, lastSeekStart, lastSeekEnd, lastIntent, className, extraClasses, childClasses, style, childrenStyles, onPlaybackChange } = this.props;
const TimeMarkerType = {
ELAPSED: 'ELAPSED',
REMAINING: 'REMAINING',
REMAINING_NEGATIVE: 'REMAINING_NEGATIVE',
DURATION: 'DURATION',
}
return (
<div className={customControls.ControlsWrapper}>
<PlaybackControls className={customControls.PlayButton, customControls.PauseButton}
isPlayable={this.state.isPlayable}
isPlaying={this.state.isPlaying}
showPrevious={false}
hasPrevious={false}
showNext={false}
hasNext={false}
onPlaybackChange={isPlaying => this.setState({ ...this.state, isPlaying }, isPlaying ? (vid01) => this.handlePlay(isPlaying, isPlayable) : (vid01) => this.handlePause(isPlaying, isPlayable))}
/>
<ProgressBar className={customControls.ProgressBar}
totalTime={this.state.totalTime}
currentTime={this.state.currentTime}
bufferedTime={this.state.bufferedTime}
isSeekable={this.state.isSeekable}
onSeek={time => this.setState((vid01) => ({ currentTime: time }))}
onSeekStart={time => this.setState((vid01) => ({ lastSeekStart: time }))}
onSeekEnd={time => this.setState((vid01) => ({ lastSeekEnd: time }))}
onIntent={time => this.setState((vid01) => ({ lastIntent: time }))}
/>
<TimeMarker className={customControls.TimeMarker}
totalTime={this.state.totalTime}
currentTime={this.state.currentTime}
markerSeparator={this.state.markerSeparator}
firstMarkerType={this.state.firstMarkerType}
secondMarkerType={this.state.secondMarkerType}
/>
</div>
);
}
}
CustomControls01.propTypes = {
};