在react js中更改幻灯片时暂停视频？

问题描述

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

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

Player.js。

json "{\"forwardednumber\":{\"number\":\"[phone]\",\"country\":\"ZA\"},\"newNumber\":{\"number\":{\"digits\":\"+441545455422408926\",\"didId\":\"ba-aee5-b75ca6bc9b08\"},\"numberType\":{\"id\":\"123456789\",\"name\":\"Geographic\"}}}"

SELECT JSON_TYPE (JSON_EXTRACT(t.extra_data,'$.number')),JSON_VALID( t.extra_data )AS j,t.* FROM order_details t
 WHERE
    json_extract(  t.extra_data,'$.number')  = '[phone]';

这是滑块代码。

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;

反应流畅的滑块文档 react slick docs。

我需要做什么才能使其正常工作？

解决方法

您没有在视频开始时将 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

,

如果您暂停视频并再次恢复，@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