移动到下一张幻灯片时，如何让轮播上的视频停止

Question

标题：使用 Bootstrap React 移动到下一张幻灯片时视频不会停止

描述：我正在使用 Bootstrap React 库和 ReactPlayer 构建视频轮播。视频播放正常，但当我移至下一张幻灯片时，上一张幻灯片的视频继续播放。我正在寻找一种方法来在用户移动到下一张幻灯片时停止播放视频。

import "./VideoCarousel.css";
import React, { useRef } from "react";
import { Carousel } from "react-bootstrap";
import Vid1 from "../videos/vid1.mp4";
import Vid2 from "../videos/vid2.mp4";
import Vid3 from "../videos/vid3.mp4";
import ReactPlayer from "react-player";
import "bootstrap/dist/css/bootstrap.css";



const VideoCarousel = () => {
  

  const videoProperties = [
    {
      id: 1,
      title: "Video 1",
      src: Vid1,
      credit: "Video by Ignis Productions",
    },
    {
      id: 2,
      title: "Video 2",
      src: Vid2,
      credit: "Video by Ignis Productions",
    },
    {
      id: 3,
      title: "Video 3",
      src: Vid3,
      credit: "Video by Ignis Productions",
    },
  ];


  return (
    <div className="App">
      <Carousel >
        {videoProperties.map((videoObj) => {
          return (
            <Carousel.Item key={videoObj.id}>
              <ReactPlayer
                url={videoObj.src}
                pip={true}
                controls={true}
                playing={false}
              />
              <Carousel.Caption>
                <h3>{videoObj.title}</h3>
                <p>{videoObj.credit}</p>
              </Carousel.Caption>
            </Carousel.Item>
          );
        })}
      </Carousel>
    </div>
  );
};

export default VideoCarousel;

Answer 1

在

<ReactPlayer />

组件中，您可以添加一个

useEffect

在

url

属性更改时运行，并停止播放所有视频。

useEffect(() => {
  Array.from(document.querySelectorAll('video')).forEach(video => video.pause())
}, [url])