0

我有一个简单的部分，我在其中显示来自不同来源的不同视频，例如 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，但在我想显示当前正在播放的视频 url 的 div 中，仍然显示旧的视频 url，如果双击则它会更改 url。

这里有什么问题？

4

1 回答 1

1

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

您可以使用onPlay回调ReactPlayer

const [currentUrl, setCurrentUrl] = useState('');
   
<ReactPlayer 
  onPlay={() => {
    setCurrentUrl(videoUrl.current?.player?.player?.player?.currentSrc)
  }} 
/>
于 2020-12-04T19:22:36.670 回答