Question

我需要先使所有视频实例静音，然后再取消对所单击实例的静音。发起此操作的最佳方法是什么？

调用视频组件-循环播放所有视频。

<ol className="videos">
  {data.allFile.nodes.map((node, i) => {
    return (
      <li key={i} className="video">
        <Video vid={node.publicURL} />
      </li>
    )
  })}
</ol>

视频组件-输出视频并添加用于静音和取消静音的clickhandler。

import React from 'react'

const Video = (props) => {
  const [mute, setMute] = React.useState(true)

  const clickHandler = () => {
    setMute(!mute)
  }

  return (
    <video autoPlay="1" loop="1" muted={(mute ? true : false)} onClick= {clickHandler}>
      <source src={props.vid} type="video/mp4" />
    </video>
  )
}

export default Video

Answer 1

使用mute作为Video Component元素上的道具，而不是Video组件上的状态。这样，您可以确保仅取消一个视频的静音。示例：

const VideoList = () => {
  const [active, setActive] = useState(0);

  <ol className="videos">
    {data.allFile.nodes.map((node) => {
      return (
        <li key={node.id} className="video">
          <Video vid={node.publicURL} mute={active !== node.id} onClick={() => setActive(active !== node.id ? node.id : -1)} />
        </li>
      )
    })}
  </ol>
};

const Video = (props) => {
  return (
    <video autoPlay="1" loop="1" muted={props.mute} onClick={props.onClick}>
      <source src={props.vid} type="video/mp4" />
    </video>
  )
}

通过这种方式，VideoList组件控制每个视频是否被“静音”。

请注意，使用数组索引并不是处理此问题的最佳方法，特别是如果您的视频数组可以随时间变化时。

编辑：

如果您要确保所有视频均从第一个渲染中静音，只需将状态的默认值设置为-1。

const [active, setActive] = useState(-1);

ReactJS / GatsbyJS修改所有视频节点实例

1 个答案: