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

29
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,11 +19,13 @@ export default function VideoPlayer({ video }) {
// }) // })
useEffect(() => { useEffect(() => {
const videoPlayer = document.getElementById("videoPlayer"); const videoPlayer = document.getElementById("videoPlayer");
if (videoPlayer) { const openVolum = () => {
videoPlayer.addEventListener("ended", () => { videoPlayer.muted = false;
};
const pauseVideo = () => {
setVideoState((old) => ({ ...old, play: false })); setVideoState((old) => ({ ...old, play: false }));
}); };
videoPlayer.addEventListener("timeupdate", () => { const updateTime = () => {
console.log((videoPlayer.currentTime / videoPlayer.duration) * 100); console.log((videoPlayer.currentTime / videoPlayer.duration) * 100);
if (!isSliding.current) if (!isSliding.current)
setVideoState((old) => ({ setVideoState((old) => ({
@ -30,8 +33,19 @@ export default function VideoPlayer({ video }) {
currentTimePercentage: currentTimePercentage:
(videoPlayer.currentTime / videoPlayer.duration) * 100, (videoPlayer.currentTime / videoPlayer.duration) * 100,
})); }));
}); };
if (videoPlayer) {
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) => { const toastValue = (value) => {
isSliding.current = true; isSliding.current = true;
@ -61,7 +75,8 @@ export default function VideoPlayer({ video }) {
isSliding.current = false; isSliding.current = false;
}; };
return ( return (
<div className="relative"> <div className="relative bg-black">
<div onClick={() => setShowController(!showController)}>
<BackgroundPlayer <BackgroundPlayer
src={video.mp4} src={video.mp4}
id="videoPlayer" id="videoPlayer"
@ -71,11 +86,13 @@ export default function VideoPlayer({ video }) {
autoPlay={videoState.play} autoPlay={videoState.play}
// style={{ height: "calc(100vh)" }} // 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