ReactPlayer 自动播放

Question

我尝试在reactjs中制作视频播放器

这是我的代码

import "./App.css";
import React, { Component, useState } from "react";
import ReactPlayer from "react-player";\

function App() {
  const [myvideo, setMyvideo] = useState("");
  const arrayqueue = [
    {
      singer: "The Valley",
      videoname: "video/video_test.mp4",
    },
    {
      singer: "My Friend",
      videoname: "video/video_test2.mp4",
    },
    {
      singer: "Say wow",
      videoname: "video/video_test3.mp4",
    },
  ];
  return (
    <div>
      <ReactPlayer url={myvideo} controls={true} />
      <div className="queue-size" id="style-1">
        {arrayqueue.map((item, index) => {
          return (
            <div
              className="row-queue"
              key={index}
              onClick={() => setMyvideo(item.videoname)}
            >
              <div className="column-queue">{item.singer}</div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

export default App;

我在队列中成功点击并将视频设置为 ReactPlayer，我的问题是如何让 ReactPlayer 自动播放队列中的下一个，所以 ReactPlayer 有 2 个选项，如果我不在队列中点击，视频将从队列中自动播放，谢谢 :)

Answer 1

ReactPlayer 有一个名为 onEnded (more info here) 的道具，可用于在当前媒体播放完毕时触发回调函数。

您可以跟踪当前正在播放的视频的索引并设置回调以循环播放您的视频数组。

我更新了您的代码并在我更改的行中添加了注释，因此您可以查看示例：

import "./App.css";
import React, { Component, useState } from "react";
import ReactPlayer from "react-player";\

function App() {
  const [myvideo, setMyvideo] = useState("");

  // New state to save index of currently playing video
  const [myvideoIndex, setMyvideoIndex] = useState(0);

  const arrayqueue = [
    {
      singer: "The Valley",
      videoname: "video/video_test.mp4",
    },
    {
      singer: "My Friend",
      videoname: "video/video_test2.mp4",
    },
    {
      singer: "Say wow",
      videoname: "video/video_test3.mp4",
    },
  ];

  // Callback function that plays next video (or goes back to first video)
  const playNext = () => {
    const nextIndex = myvideoIndex + 1
    if (nextIndex >= arrayqueue.length) {
      setMyvideo(arrayqueue[0])
      setMyvideoIndex(0)
    } else {
      setMyvideo(arrayqueue[nextIndex])
      setMyvideoIndex(nextIndex)
    }
  }

  // When click, set the video and the current index
  const handleClick = (item, index) => {
    setMyvideo(item.videoname)
    setMyvideoIndex(index)
  }

  return (
    <div>
      <ReactPlayer url={myvideo} controls={true} onEnded={playNext} />
      <div className="queue-size" id="style-1">
        {arrayqueue.map((item, index) => {
          return (
            <div
              className="row-queue"
              key={index}
              onClick={() => handleClick(item, index)}
            >
              <div className="column-queue">{item.singer}</div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

export default App;

ReactPlayer 自动播放

ReactPlayer make auto play

javascript

reactjs

react-player