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