单击时使用 React 在播放器中显示当前播放 url

Question

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

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

这是我的源代码。

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，但在我想显示当前播放视频的 div 中，url 仍然显示旧视频url，如果双击然后它会更改 url。

这里有什么问题？

Answer 1

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

您可以使用 onPlay 回调 ReactPlayer

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

单击时使用 React 在播放器中显示当前播放 url

On click show the current playing url in a player using react

html

javascript

video

reactjs

react-player