Question

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

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

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

我确定这是我缺少的新手步骤，但我几乎被困在这里......任何反馈都会非常感激。

*编辑：将此行添加到＆＃34; PlaybackControls＆＃34; （onClick = {isPlaying？console.log（＆＃39; PLAYING！＆＃39;）：console.log（＆＃39; PAUSED！＆＃39;）}）

console.log（）打印＆＃39;播放！＆＃39;并且＆＃39; PAUSED！＆＃39; onClick事件，正如预期的那样...但是如果我用调用＆＃34; handlePlay（）＆＃34;来替换console.log（）和＆＃34; handlePause（）＆＃34;功能......没有任何反应。

我错过了什么？

我的代码示例如下：

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

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

我仍然熟悉React / JSX语法，但我真的很喜欢到目前为止学到的东西。模块化方法肯定更高效，因为它与内存/优化有关......它使得更容易确定错误和错误。说到这里......到目前为止我发现的是：

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

我还想弄清楚如何在组件之间传递道具。状态和属性的概念对我来说很有意义，但我对如何正确执行工作流缺乏一些基本的理解。我确信它与React Life Cycles有关，但那是一次完全独立的对话。

目前，我的更新代码示例发布在下方。我可以使用和外部组件（自定义播放器控件）播放/暂停HTML5视频，但是如何将props元素传递回自定义控件组件？例如，我如何映射默认道具（即＆＃34;当前时间＆＃34;，＆＃34;持续时间＆＃34;，＆＃34;寻找＆＃34;，＆＃34;结束＆＃34; =＆gt;到＆＃34; currentTime＆＃34;，＆＃34; totalTime＆＃34;，＆＃34; onSeek＆＃34;等等？）

请原谅我冗长的咆哮，但任何反馈都会非常感激。这是我的更新代码：

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 = {
};

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

1 个答案: