Блог

Я хочу воспроизвести 2 reactjs используемых файла ReactPlayer , файл 1 — это видеомузыка, включающая аудио человеческого голоса, файл 2 — это только музыка, но человеческий голос был удален.

Проблема, когда я запускаю приведенный ниже код, заключается в том, что файл 1 может запуститься раньше, чем файл 2, или наоборот, мой вопрос в том, могу ли я воспроизвести 2 файла вместе, поэтому при загрузке или рендеринге файла 1 файл 2 будет делать то же самое, что и файл 1

Этот код

 import React, { useState } from "react";
import ReactPlayer from "react-player";

function App(){
  const [playing, setPlaying] = useState(true);
  const [muted, setMuted] = useState(true);

  function handlePlayPause() {
    setPlaying(!playing);
  }

  function handleMuted() {
    setMuted(!muted);
  }

  return(
  <div>
     //play video music "I can fly include the music with human vocal"
     <ReactPlayer
        playing={playing}
        url={"I can Fly.mp4"}
        muted={muted}
      />

      //play music only "I can fly (the file no human vocal)"
      <ReactPlayer
        playing={playing}
        url={"I can fly(no vocal).mp3"}
        muted={!muted}
        hidden
      />
      <button onClick={() => handlePlayPause()}>
        {playing ? "pause" : "play"}
      </button>
      <button onClick={() => handleMuted()}>
        {muted ? "vocal" : "no vocal"}
      </button>
  </div>
)}

export default App;
  

Надеюсь, вы, ребята, понимаете, о чем я спрашиваю, извините за мой плохой английский: D

Я думаю, проблема в том, что видео требует времени для подготовки перед воспроизведением. У каждого видео свое собственное время, что означает, что у каждого видео будет разное время для начала воспроизведения.

В результате этого нам приходится ждать, пока все видео не будут готовы, прежде чем воспроизводить их все сразу. К счастью, react-player он предложил onReady обратный вызов, сообщающий, что видео готово к воспроизведению. Вот общая идея для вас:

 import React from "react";
import ReactPlayer from "react-player";

// Assuming to have 2 videos
const links = [
  "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4",
  "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4"
];

export default function App() {
  // Count number of videos ready to play
  const [readyCount, setReadyCount] = React.useState(0);
  const [playing, setPlaying] = React.useState(false);

  // Just keep counting as a video ready
  const onReady = () => {
    setReadyCount(readyCount   1);
  };

  React.useEffect(() => {
    // All videos ready to play, get them played
    if (readyCount === links.length) {
      setPlaying(true);
    }
  }, [readyCount]);

  return (
    <div className="App">
      {links.map((url) => (
        <ReactPlayer key={url} playing={playing} onReady={onReady} url={url} />
      ))}
    </div>
  );
}
  

Я также создал для вас codesandbox: https://codesandbox.io/s/kind-bardeen-59t8f?file=/src/App.js