add volume,multiple

master
lgf 3 years ago
parent 3c93cc1056
commit 7ca6fd873c
  1. 27
      src/appComponent.tsx
  2. 14
      src/core/controller/index.tsx
  3. 4
      src/core/controls/index.tsx
  4. 34
      src/core/index.tsx
  5. 2
      src/core/progress/index.tsx
  6. 73
      src/core/useVideo.ts

@ -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<HTMLVideoElement>(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 (
<>
<JoLPlayer />
{isPlay ? '播放' : '暂停'}
<JoLPlayer ref={videoRef} />
<JoLPlayer />
</>
);

@ -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<NodeJS.Timeout | null>(null!);
const viewClientX = useRef<number>(null!);

@ -30,7 +30,9 @@ const Index = memo(function Index(props) {
const revicePropsData = useRef<any>();
const { isPlay, handleChangePlayState, currentTime, duration, isPictureinpicture } = useVideo({});
const { isPlay, handleChangePlayState, currentTime, duration, isPictureinpicture } = useVideo({
videoElement: reviceProps.videoRef,
});
const { controlsState, dispatch } = useControls();

@ -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<unknown> | 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({
</FlowContext.Provider>
</figure>
);
});
};
export default Index;
const JoLPlayerComponent = forwardRef<HTMLVideoElement, any>(JoLPlayer);
export default JoLPlayerComponent;

@ -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();

@ -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<HTMLVideoElement | null>(null);
const videoRef = useRef<HTMLVideoElement>(null!);
const interval = useRef<NodeJS.Timeout | null>(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],
);
};

Loading…
Cancel
Save