使用 React 更新 HTML5 视频的源 URL

Question

我想更新 HTML5 视频元素中的源标记，这样当我单击一个按钮时，正在播放的任何内容都会切换到新视频。

我有一个 Clip 组件，它返回一个 HTML5 视频元素，源 URL 通过 props 提供。

 function Clip(props) {
  return (
    <video width="320" height="240" controls autoPlay>
      <source src={props.url} />
    </video>
  )
}

我还有一个 Movie 组件，它包含多个 URL，每个 URL 对应于电影的一段。它还包含一个位置属性，它通过记住当前正在播放的部分来充当迭代器。

 class Movie extends Component {
  constructor() {
    super();
    this.state = {
      sections: [
        'https://my-bucket.s3.amazonaws.com/vid1.mp4',
        'https://my-bucket.s3.amazonaws.com/vid2.mp4'
      ],
      position: 0
    };
  }
  render() {
    const sections = this.state.sections
    const position = this.state.position

    return (
      <div>
        {position}
        <Clip url={sections[position]} />
        <button onClick={() => this.updatePosition()}>Next</button>
      </div>
    )
  }
  updatePosition() {
    const position = this.state.position + 1;
    this.setState({ position: position });
  }
}

Movie 组件呈现一个 Clip 组件和一个“Next”按钮。单击下一步按钮时，我想更新位置属性并使用部分中的下一个 URL 重新呈现 HTML5 视频元素。

截至目前，当我点击 Next 时，HTML5 视频源标签会更新，但该元素会继续播放来自先前 URL 的视频。谁能帮我弄清楚如何重置视频元素？

更新： 我创建了一个 JSFiddle，您可以 在此处 看到它。

更新 2： 更新视频元素上的 src 属性有效！

原文由 Sherwood Callaway 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

快速而肮脏的遮阳篷： 添加 key 道具 <Clip> 或 <video> ，例如：

 function Clip({ url }) {
  return (
    <video key={url}>
      <source src={url} />
    </video>
  );
}

---

推荐的 awnser： 只要有新的 URL，就触发视频元素的 load 事件，例如：

 function Clip({ url }) {
  const videoRef = useRef();

  useEffect(() => {
    videoRef.current?.load();
  }, [url]);

  return (
    <video ref={videoRef}>
      <source src={url} />
    </video>
  );
}

---

解释： 视频最初没有改变，因为本质上你只是在修改 <source> 元素，React 理解 <video> 应该保持不变，所以它不会在 DOM 上更新它并且不会为该源触发新的 load 事件。应该为 load 触发一个新的 <video> 事件。

肮脏的答案有效，因为当您更改 React 元素的 key 时，React 理解这是一个全新的元素。然后它在 DOM 中创建一个新元素，该元素自然会在挂载时触发自己的加载事件。

原文由 Ramon Balthazar 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

由于某种原因，更改 <source /> 的 src 似乎不会切换视频。我不认为这不是反应问题。可能正是 <source /> 的工作原理。也许您必须再次在元素上调用 .load() 。但是直接在元素本身上设置它更容易。

请参阅顶部答案的评论： Can I use javascript to dynamically change a video’s source?

您可以直接在元素上设置 src ：

 function Clip(props) {
  return (
    <video width="320" height="240" src={props.url} controls autoPlay>
    </video>
  )
}

原文由 Martin Dawson 发布，翻译遵循 CC BY-SA 3.0 许可协议