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

Posted 2023-02-25

【中文标题】React Player Controls - HTML5 视频事件处理程序无法识别视频对象

【英文标题】：React Player Controls - HTML5 video event handlers not recognizing video object

【发布时间】：2018-06-03 21:29:43

【问题描述】：

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

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

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

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

*编辑：在“PlaybackControls”中添加了这一行（ onClick=isPlaying ? console.log('PLAYING!') : console.log('PAUSED!') ）

console.log() 打印 'PLAYNING!'和“暂停！” onClick 事件，正如预期的那样……但是如果我用对“handlePlay()”和“handlePause()”函数的调用替换 console.log()s……没有任何反应。

我错过了什么？

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

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>
        );
      
    

【参考方案1】：

我取得了一些进展，所以我决定回答我自己的问题，希望能从一些优秀的 Samaritan React/JSX 大师那里得到一些反馈。

我仍在熟悉 React/JSX 语法，但我真的很喜欢我目前所学的内容。模块化方法肯定更有效，因为它与内存/优化有关......并且它更容易查明错误和错误。话虽如此......这是我迄今为止发现的：

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

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

现在，我的更新代码示例发布在下面。我能够播放/暂停带有外部组件（自定义播放器控件）的 HTML5 视频，但是如何将 props 元素传递回自定义控件组件？例如，如何将默认的 props（即“currentTime”、“duration”、“seeking”、“ended” => 映射到“currentTime”、“totalTime”、“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 = 
;