wishpal_ironfan
/
tiefen_space_h5
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

开启视频音量

This commit is contained in:
al 2024-12-19 19:07:20 +08:00
parent 750f1ab18e
commit b84d48db24
1 changed files with 39 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
components/VideoPlayer/index.jsx
View File

@ -8,6 +8,7 @@ export default function VideoPlayer({ video }) {
play: true, play: true,
currentTimePercentage: 0, currentTimePercentage: 0,
}); });
const [showController, setShowController] = useState(false);
const isSliding = useRef(null); const isSliding = useRef(null);
// const currentTime = useMemo(()=>{ // const currentTime = useMemo(()=>{
// const videoPlayer = document.getElementById("videoPlayer"); // const videoPlayer = document.getElementById("videoPlayer");
@ -18,20 +19,33 @@ export default function VideoPlayer({ video }) {
// }) // })
useEffect(() => { useEffect(() => {
const videoPlayer = document.getElementById("videoPlayer"); const videoPlayer = document.getElementById("videoPlayer");
const openVolum = () => {
videoPlayer.muted = false;
};
const pauseVideo = () => {
setVideoState((old) => ({ ...old, play: false }));
};
const updateTime = () => {
console.log((videoPlayer.currentTime / videoPlayer.duration) * 100);
if (!isSliding.current)
setVideoState((old) => ({
...old,
currentTimePercentage:
(videoPlayer.currentTime / videoPlayer.duration) * 100,
}));
};
if (videoPlayer) { if (videoPlayer) {
videoPlayer.addEventListener("ended", () => { videoPlayer.addEventListener("loadedmetadata", openVolum);
setVideoState((old) => ({ ...old, play: false })); videoPlayer.addEventListener("ended", pauseVideo);
}); videoPlayer.addEventListener("timeupdate", updateTime);
videoPlayer.addEventListener("timeupdate", () => {
console.log((videoPlayer.currentTime / videoPlayer.duration) * 100);
if (!isSliding.current)
setVideoState((old) => ({
...old,
currentTimePercentage:
(videoPlayer.currentTime / videoPlayer.duration) * 100,
}));
});
} }
return () => {
if (videoPlayer) {
videoPlayer.removeEventListener("loadedmetadata", openVolum);
videoPlayer.removeEventListener("ended", pauseVideo);
videoPlayer.removeEventListener("timeupdate", updateTime);
}
};
}, []); }, []);
const toastValue = (value) => { const toastValue = (value) => {
isSliding.current = true; isSliding.current = true;
@ -61,21 +75,24 @@ export default function VideoPlayer({ video }) {
isSliding.current = false; isSliding.current = false;
}; };
return ( return (
<div className="relative"> <div className="relative bg-black">
<BackgroundPlayer <div onClick={() => setShowController(!showController)}>
src={video.mp4} <BackgroundPlayer
id="videoPlayer" src={video.mp4}
// controlsList="none" id="videoPlayer"
poster={video?.url.src} // controlsList="none"
blurDataURL={video?.url.blurDataURL} poster={video?.url.src}
autoPlay={videoState.play} blurDataURL={video?.url.blurDataURL}
// style={{ height: "calc(100vh)" }} autoPlay={videoState.play}
/> // style={{ height: "calc(100vh)" }}
/>
</div>
<div <div
className="absolute w-full px-4 grid justify-between items-center" className="absolute w-full px-4 grid justify-between items-center"
style={{ style={{
bottom: "12px", bottom: "12px",
gridTemplateColumns: "calc(100% - 32px) 32px", gridTemplateColumns: "calc(100% - 32px) 32px",
display: showController ? "grid" : "none",
}} }}
> >
<Slider <Slider