add video modification url method

master
lgf 3 years ago
parent 043096bc17
commit 367b24b45b
  1. 22
      src/appComponent.tsx
  2. 4
      src/core/index.tsx
  3. 3
      src/core/useVideo.ts
  4. 8
      src/interface/index.ts

@ -1,8 +1,11 @@
import React, { memo, useRef, useEffect, useMemo } from 'react'; import React, { memo, useRef, useEffect, useMemo, useState } from 'react';
import JoLPlayer, { JoLPlayerType } from './app'; import JoLPlayer, { JoLPlayerType } from './app';
import '@/icons/'; import '@/icons/';
const AppComponent = memo(function AppComponent(props) { const AppComponent = memo(function AppComponent(props) {
const url = useRef<string>(
'https://gs-files.oss-cn-hongkong.aliyuncs.com/okr/test/file/2021/07/01/haiwang.mp4',
);
const videoRef = useRef<JoLPlayerType.JoLPlayerRef>(null!); const videoRef = useRef<JoLPlayerType.JoLPlayerRef>(null!);
const onProgressMouseDown: JoLPlayerType.callBackType = (val) => { const onProgressMouseDown: JoLPlayerType.callBackType = (val) => {
@ -24,6 +27,13 @@ const AppComponent = memo(function AppComponent(props) {
// console.log(`onTimeChange`, val); // console.log(`onTimeChange`, val);
}; };
const onEndEd = (val: any) => { const onEndEd = (val: any) => {
setTimeout(() => {
videoRef.current.setVideoSrc(
'https://gs-files.oss-accelerate.aliyuncs.com/okr/prod/file/2021/08/10/1628605591454mda-met51bhiqb2sgjzd.mp4',
);
videoRef.current.play();
}, 1000);
console.log(`onEndEd`, val); console.log(`onEndEd`, val);
}; };
const onError = () => { const onError = () => {
@ -51,12 +61,6 @@ const AppComponent = memo(function AppComponent(props) {
}; };
useEffect(() => { useEffect(() => {
if (videoRef.current) { if (videoRef.current) {
setTimeout(() => {
videoRef.current.video.play();
}, 1000);
console.log(`object`, videoRef.current.play);
// videoRef.current.play();
} }
console.log(`videoRef.current`, videoRef.current); console.log(`videoRef.current`, videoRef.current);
@ -66,11 +70,11 @@ const AppComponent = memo(function AppComponent(props) {
<JoLPlayer <JoLPlayer
ref={videoRef} ref={videoRef}
option={{ option={{
videoSrc: videoSrc: url.current,
'https://gs-files.oss-cn-hongkong.aliyuncs.com/okr/test/file/2021/07/01/haiwang.mp4',
width: 750, width: 750,
height: 420, height: 420,
theme: '#00D3FF', theme: '#00D3FF',
poster: 'https://cdn.gudsen.com/2021/06/28/f81356b08b4842d7a3719499f557c8e4.JPG',
}} }}
onProgressMouseDown={onProgressMouseDown} onProgressMouseDown={onProgressMouseDown}
onPlay={onPlay} onPlay={onPlay}

@ -30,7 +30,7 @@ const JoLPlayer = function JoLPlayer(props: videoparameter, ref: React.Ref<unkno
onError, onError,
onvolumechange, onvolumechange,
} = props; } = props;
const { videoSrc, width, height, theme } = option; const { videoSrc, width, height, theme, poster } = option;
/** /**
* @description * @description
*/ */
@ -153,7 +153,7 @@ const JoLPlayer = function JoLPlayer(props: videoparameter, ref: React.Ref<unkno
return ( return (
<figure className="JoL-player-container" ref={videoContainerRef}> <figure className="JoL-player-container" ref={videoContainerRef}>
<div className="light-off-mask" ref={lightOffMaskRef}></div> <div className="light-off-mask" ref={lightOffMaskRef}></div>
<video className="JoL-player" ref={videoRef}> <video className="JoL-player" ref={videoRef} poster={poster ? poster : undefined}>
{returnVideoSource} {returnVideoSource}
</video> </video>
{!isVideoUseful && <p className="video-no-useful-tip"> ( ́︿ ̀)</p>} {!isVideoUseful && <p className="video-no-useful-tip"> ( ́︿ ̀)</p>}

@ -122,6 +122,9 @@ export const useVideo = (props: any, dep: DependencyList = []) => {
seek: (currentTime) => { seek: (currentTime) => {
videoRef.current.currentTime = currentTime; videoRef.current.currentTime = currentTime;
}, },
setVideoSrc: (url) => {
videoRef.current.src = url;
},
}; };
}, [dep]); }, [dep]);

@ -23,6 +23,10 @@ export interface videoOption {
* @description * @description
*/ */
videoSrc: string; videoSrc: string;
/**
* @description
*/
poster?: string;
} }
export interface videoAttributes<T = number, K = boolean> { export interface videoAttributes<T = number, K = boolean> {
/** /**
@ -87,6 +91,10 @@ export interface videoMethod<T = noParVoid> {
* @description /s * @description /s
*/ */
seek: parVoid<number>; seek: parVoid<number>;
/**
* @description src
*/
setVideoSrc: parVoid<string>;
} }
export type callBackType = (e: videoAttributes) => void; export type callBackType = (e: videoAttributes) => void;
export interface videoCallback<T = callBackType> { export interface videoCallback<T = callBackType> {

Loading…
Cancel
Save