如何解决在react js中更改幻灯片时暂停视频?
我有一个使用 react slick 滑块的简单滑块,其中一张幻灯片是使用 react 播放器的视频,现在我想用户是否更改幻灯片以暂停播放视频,这是我目前所拥有的。
这是代码沙箱的现场演示:pause video demo。
Player.js。
json "{\"forwardednumber\":{\"number\":\"+27781361395\",\"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') = '+27781361395';
这是滑块代码。
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
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。