From 7ca6fd873ca2607acbc71720a548c430be7ccf9a Mon Sep 17 00:00:00 2001 From: lgf <18827634408@163.com> Date: Wed, 4 Aug 2021 18:26:19 +0800 Subject: [PATCH] add volume,multiple --- src/appComponent.tsx | 27 ++++++++++++- src/core/controller/index.tsx | 14 +++---- src/core/controls/index.tsx | 4 +- src/core/index.tsx | 34 +++++++++++----- src/core/progress/index.tsx | 2 +- src/core/useVideo.ts | 73 ++++++++++++++++++----------------- 6 files changed, 97 insertions(+), 57 deletions(-) diff --git a/src/appComponent.tsx b/src/appComponent.tsx index ab17a24..6803f2f 100644 --- a/src/appComponent.tsx +++ b/src/appComponent.tsx @@ -1,11 +1,34 @@ -import React, { memo } from 'react'; +import React, { memo, useRef, useEffect } from 'react'; import JoLPlayer from '@/core/index'; import '@/icons/'; +import { useVideo } from '@/core/useVideo'; const AppComponent = memo(function AppComponent(props) { + const videoRef = useRef(null!); + const xx = useRef(false); + useEffect(() => {}, [videoRef.current]); + const { isPlay, handleChangePlayState, currentTime } = useVideo({ + videoElement: + videoRef.current && + (videoRef.current as HTMLVideoElement & { video: HTMLVideoElement }).video, + // onPause: (val: any) => { + // console.log(val, xx.current); + // }, + // onPlay: (val: any) => { + // console.log(val, xx.current); + // }, + onTimeChange: (val: any) => { + // console.log(val); + }, + // onEndEd: (val: any) => { + // console.log('结束', val); + // }, + }); + return ( <> - + {isPlay ? '播放' : '暂停'} + ); diff --git a/src/core/controller/index.tsx b/src/core/controller/index.tsx index b101303..74d81cc 100644 --- a/src/core/controller/index.tsx +++ b/src/core/controller/index.tsx @@ -16,20 +16,20 @@ const Index = memo(function Index(props) { const { dispatch } = reviceProps; const { isPlay, handleChangePlayState, currentTime } = useVideo({ + videoElement: reviceProps.videoRef, onPause: (val: any) => { console.log(val); }, onPlay: (val: any) => { console.log(val); }, - onTimeChange: (val: any) => { - // console.log(val); - }, - onEndEd: (val: any) => { - console.log('结束', val); - }, + // onTimeChange: (val: any) => { + // console.log(val); + // }, + // onEndEd: (val: any) => { + // console.log('结束', val); + // }, }); - const timer = useRef(null!); const viewClientX = useRef(null!); diff --git a/src/core/controls/index.tsx b/src/core/controls/index.tsx index 6d02309..9f72a0c 100644 --- a/src/core/controls/index.tsx +++ b/src/core/controls/index.tsx @@ -30,7 +30,9 @@ const Index = memo(function Index(props) { const revicePropsData = useRef(); - const { isPlay, handleChangePlayState, currentTime, duration, isPictureinpicture } = useVideo({}); + const { isPlay, handleChangePlayState, currentTime, duration, isPictureinpicture } = useVideo({ + videoElement: reviceProps.videoRef, + }); const { controlsState, dispatch } = useControls(); diff --git a/src/core/index.tsx b/src/core/index.tsx index cbb9204..330f536 100644 --- a/src/core/index.tsx +++ b/src/core/index.tsx @@ -1,4 +1,11 @@ -import React, { memo, useRef, useState, useEffect, useMemo } from 'react'; +import React, { + forwardRef, + useRef, + useState, + useEffect, + useMemo, + useImperativeHandle, +} from 'react'; import Controller from './controller'; import { videoparameter } from '@/interface'; import { FlowContext, useVideoFlow } from '@/core/context'; @@ -8,11 +15,14 @@ import Broadcast from '@/components/svgIcon'; import '@/assets/css/reset.scss'; import './index.scss'; -const Index = memo(function Index({ - videoSrc = 'https://gs-files.oss-cn-hongkong.aliyuncs.com/okr/test/file/2021/07/01/haiwang.mp4', -}: { - videoSrc?: string; -}) { +const JoLPlayer = function JoLPlayer( + { + videoSrc = 'https://gs-files.oss-cn-hongkong.aliyuncs.com/okr/test/file/2021/07/01/haiwang.mp4', + }: { + videoSrc?: string; + }, + ref: React.Ref | undefined, +) { /** * @description 关灯对象 */ @@ -50,6 +60,10 @@ const Index = memo(function Index({ setIsBufferring(false); }; + useImperativeHandle(ref, () => ({ + video: videoRef.current, + })); + useEffect(() => { /** * @description 设置用户给的视频播放器长宽 @@ -60,7 +74,6 @@ const Index = memo(function Index({ timerToCheckVideoUseful.current = setTimeout(() => { // 当视频未初始化时（即不可用时） if (videoElem.networkState === 0) { - console.log('can not find'); setIsVideoUseful(false); } else { clearTimeout(timerToCheckVideoUseful.current!); @@ -79,7 +92,7 @@ const Index = memo(function Index({ videoElem.removeEventListener('waiting', waitingListener); videoElem.removeEventListener('playing', playingListener); }; - }, []); + }, [videoRef.current]); const returnVideoSource = useMemo(() => { return ( @@ -119,6 +132,7 @@ const Index = memo(function Index({ ); -}); +}; -export default Index; +const JoLPlayerComponent = forwardRef(JoLPlayer); +export default JoLPlayerComponent; diff --git a/src/core/progress/index.tsx b/src/core/progress/index.tsx index 999f446..8e9417f 100644 --- a/src/core/progress/index.tsx +++ b/src/core/progress/index.tsx @@ -29,7 +29,7 @@ const Index = memo(function Index(props) { const reviceProps = useContext(FlowContext); - const { currentTime, duration, bufferedTime } = useVideo({}); + const { currentTime, duration, bufferedTime } = useVideo({ videoElement: reviceProps.videoRef }); const { progressState, dispatch } = useProgress(); diff --git a/src/core/useVideo.ts b/src/core/useVideo.ts index 58379c7..78465b7 100644 --- a/src/core/useVideo.ts +++ b/src/core/useVideo.ts @@ -2,7 +2,10 @@ import { useRef, useMemo, useEffect, useState, useReducer, useContext, useCallba import useMandatoryUpdate from '@/utils/useMandatoryUpdate'; import { FlowContext } from '@/core/context'; -export const useVideo = ({ onPause, onPlay, onTimeChange, onEndEd }: any) => { +export const useVideo = ( + { videoElement, onPause, onPlay, onTimeChange, onEndEd }: any, + dep?: any, +) => { const forceUpdate = useMandatoryUpdate(); const reviceProps = useContext(FlowContext); @@ -15,53 +18,44 @@ export const useVideo = ({ onPause, onPlay, onTimeChange, onEndEd }: any) => { duration: 0, bufferedTime: 0, isPictureinpicture: false, + volume: 0, + multiple: 1.0, }); - const videoRef = useRef(null); + const videoRef = useRef(null!); const interval = useRef(null!); - videoRef.current = videoEle; + videoRef.current = videoElement; useEffect(() => { + forceUpdate(); if (videoRef.current) { /** * @description 监听总时长 */ videoRef.current.addEventListener('canplay', () => { - videoParameter.current = { - ...videoParameter.current, - duration: videoRef.current!.duration, - }; + torture({ duration: videoRef.current.duration }); }); /** * @description 监听缓冲 */ videoRef.current.addEventListener('progress', () => { - if (videoRef.current!.buffered.length >= 1) { - videoParameter.current = { - ...videoParameter.current, - bufferedTime: videoRef.current!.buffered.end(0), - }; + if (videoRef.current.buffered.length >= 1) { + torture({ bufferedTime: videoRef.current.buffered.end(0) }); } }); /** * @description 已经进入画中画 */ videoRef.current.addEventListener('enterpictureinpicture', () => { - videoParameter.current = { - ...videoParameter.current, - isPictureinpicture: true, - }; + torture({ isPictureinpicture: true }); }); /** * @description 已退出画中画模式 */ videoRef.current.addEventListener('leavepictureinpicture', () => { - videoParameter.current = { - ...videoParameter.current, - isPictureinpicture: false, - }; + torture({ isPictureinpicture: false }); }); // 定时器用于更新当前视频时间 interval.current = setInterval(() => { @@ -69,11 +63,13 @@ export const useVideo = ({ onPause, onPlay, onTimeChange, onEndEd }: any) => { * 强制更新 */ forceUpdate(); - videoParameter.current = { - ...videoParameter.current, - currentTime: videoRef.current!.currentTime, - isPlay: videoRef.current!.paused ? false : true, - }; + + torture({ + currentTime: videoRef.current.currentTime, + isPlay: videoRef.current.paused ? false : true, + volume: videoRef.current.volume, + multiple: videoRef.current.playbackRate, + }); }, 1); videoRef.current.addEventListener('pause', pauseChange); videoRef.current.addEventListener('play', playChange); @@ -83,15 +79,21 @@ export const useVideo = ({ onPause, onPlay, onTimeChange, onEndEd }: any) => { return () => { interval.current && clearInterval(interval.current); }; - }, [videoEle, videoRef.current]); + }, [videoRef.current, dep, videoElement]); + const torture = (val: any) => { + videoParameter.current = { ...videoParameter.current, ...val }; + }; const pauseChange = () => { + torture({ isPlay: videoRef.current.paused ? false : true }); onPause && onPause(videoParameter.current); }; const playChange = () => { + torture({ isPlay: videoRef.current.paused ? false : true }); onPlay && onPlay(videoParameter.current); }; const timeupdate = () => { + torture({ isPlay: videoRef.current.paused ? false : true }); onTimeChange && onTimeChange(videoParameter.current); }; const endedChange = () => { @@ -99,17 +101,16 @@ export const useVideo = ({ onPause, onPlay, onTimeChange, onEndEd }: any) => { }; const handleChangePlayState = () => { if (videoParameter.current.isPlay) { - videoRef.current!.pause(); + videoRef.current.pause(); } else { - videoRef.current!.play(); + videoRef.current.play(); } - videoParameter.current = { - ...videoParameter.current, - isPlay: videoRef.current!.paused ? false : true, - }; - }; - return { - handleChangePlayState, - ...videoParameter.current, }; + return useMemo( + () => ({ + handleChangePlayState, + ...videoParameter.current, + }), + [videoParameter.current], + ); };