在反应js中更改幻灯片时暂停视频？答案

【问题标题】：Pause video when changing slide in react js?在反应js中更改幻灯片时暂停视频？
【发布时间】：2021-07-29 22:50:19
【问题描述】：

我有一个使用 react slick 滑块的简单滑块我的一张幻灯片是使用 react 播放器的视频，现在我想如果用户更改幻灯片以暂停播放视频，这是我目前所拥有的。

这是代码沙盒的现场演示：pause video demo。

Player.js.

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

function Player({ isPlaying, setIsPlaying }) {
  const handleisPlaying = () => {
    console.log("before playing?", isPlaying);
    setIsPlaying(false);
    console.log("after playing?", isPlaying);
  };
  return (
    <div>
      <ReactPlayer
        url="https://www.youtube.com/watch?v=5DjF0C3dybg"
        playing={isPlaying}
        volume={1}
        width="50vw"
        height="50vh"
      />
      <button
        type="button"
        className="btn btn-success"
        onClick={handleisPlaying}
      >
        pause
      </button>
    </div>
  );
}

export default Player;

这是滑块代码。

import React, { useRef, useState, useEffect } from "react";
import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import Player from "./Player";

export default function APP() {
  const [isPlaying, setIsPlaying] = useState(false);
  const settings = {
    dots: true,
    beforeChange: () => {
      console.log("after change");
      setIsPlaying(false);
    }
  };

  return (
    <div className="container">
      <Slider {...settings}>
        <div>
          <img src="http://placekitten.com/g/400/200" />
        </div>
        <div>
          <img src="http://placekitten.com/g/400/200" />
        </div>
        <Player setIsPlaying={setIsPlaying} isPlaying={isPlaying} />
      </Slider>
    </div>
  );
}

反应光滑的滑块文档react slick docs。

我需要做什么才能让它工作？

【问题讨论】：

看起来更像是视频播放器中的一个错误...
我在这里找不到什么问题？？？？
不起作用，因为您正在使用 youtube 的播放按钮。请注意您的暂停按钮也不起作用。

标签： javascript reactjs react-hooks react-slick react-player

【解决方案1】：

您没有在视频开始时将isPlaying 设置为true。

你可以这样做。

 <ReactPlayer
        url="https://www.youtube.com/watch?v=5DjF0C3dybg"
        playing={isPlaying}
        onStart={() => setIsPlaying(true)}
        onPause={() => setIsPlaying(false)}
        onEnded={() => setIsPlaying(false)}
        volume={1}
        width="50vw"
        height="50vh"
      />

您也可以在这里查看。 https://codesandbox.io/s/pause-de-video-forked-9788g?file=/src/Player.js

【讨论】：

【解决方案2】：

如果您暂停视频并再次恢复，@saksh 的回答将不起作用。我从 react-player 库的维护者的评论中得到以下内容：https://github.com/cookpete/react-player/issues/1152#issuecomment-767666288

 <ReactPlayer
        url="https://www.youtube.com/watch?v=5DjF0C3dybg"
        playing={isPlaying}
        onPlay={() => setIsPlaying(true)}
        onPause={() => setIsPlaying(false)}
        volume={1}
        width="50vw"
        height="50vh"
      />

见https://codesandbox.io/s/pause-de-video-forked-qb685?file=/src/Player.js

【讨论】：

老实说，如果我是你，我会考虑查看 react-player 源代码并自己制作一个简单的包装器，至少这样你可以更好地了解潜在的竞争条件等。
感谢您指出案例 :)...更新了答案。