单击时使用反应在播放器中显示当前播放的网址答案

【问题标题】：On click show the current playing url in a player using react单击时使用反应在播放器中显示当前播放的网址
【发布时间】：2021-03-16 19:42:37
【问题描述】：

我有一个简单的部分，我在其中显示来自不同来源的不同视频，例如 youtube，直接链接，例如 mp4、hls、dash 等我使用react-player 插件来显示视频，点击我正在更改视频网址。

现在我想在播放器中显示当前正在播放的视频 URL。

现场演示：live demo code sand box

这是我的源代码。

import React, { useState, useRef, useEffect } from "react";
import "./styles.css";
import ReactPlayer from "react-player";

export default function App() {
  const [url, setUrl] = useState([
    "https://ak.picdn.net/shutterstock/videos/32335450/preview/stock-footage-drone-scanning-farm-analyze-the-field-smart-agriculture-k-size-movie-internet-of-things-th.webm"
  ]);

  const videoUrl = useRef(null);

  const hanldeBtn = () => {
    setUrl([
      "//s3.amazonaws.com/codecademy-content/courses/React/react_video-fast.mp4",
      "https://www.youtube.com/watch?v=9W0Dy1nM-zU",
      "https://bitdash-a.akamaihd.net/content/MI201109210084_1/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8"
    ]);
  };

  return (
    <div>
      <div className="player-wrapper">
        <ReactPlayer
          ref={videoUrl}
          controls
          url={url}
          playsinline
          muted={true}
          playing={true}
          autoPlay
          width="100%"
          height="100%"
          className="react-player"
        />
      </div>

      <button onClick={hanldeBtn}>Change url</button>

      <div id="debug">
        {" "}
        {videoUrl.current ? (
          <>
            <span>
              New Url: {videoUrl.current?.player?.player?.player?.currentSrc}
            </span>
          </>
        ) : (
          <>
            <span>Default Url: {url} </span>
          </>
        )}
      </div>
    </div>
  );
}

问题： 现在，当我单击按钮更改 url 时，它会更改播放器中的视频 url，但在我想显示当前正在播放的视频 url 的 div 中仍然显示旧的视频 url，如果双击则它会更改 url。

这里有什么问题？

【问题讨论】：

为什么不直接使用url 而不是{videoUrl.current?.player?.player?.player?.currentSrc}？您已经拥有处于 React 状态的 URL。
但videoUrl 在更改时不会导致重新渲染，因为它只是一个参考；因此，当您的应用使用新 URL ReactPlayer 渲染时，直到该渲染之后才会更新 videoUrl（并且由于它只是一个 ref，因此不会触发另一个渲染）。
因为URL不会显示当前正在播放的视频，但会显示所有可用的URL，你可以在codesandbox demo中自己查看

标签： javascript html reactjs video react-player

【解决方案1】：

React 中的参考变化，不会触发重新渲染。第一次单击时，url 状态更改，组件重新渲染，ReactPlayer 更新 ref，但组件不会第二次渲染。第二次点击时，url 状态再次改变，组件重新渲染和之前的 ref 值渲染

你可以使用ReactPlayer的onPlay回调

const [currentUrl, setCurrentUrl] = useState('');
   
<ReactPlayer 
  onPlay={() => {
    setCurrentUrl(videoUrl.current?.player?.player?.player?.currentSrc)
  }} 
/>

【讨论】：