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 '@/icons/';
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 onProgressMouseDown: JoLPlayerType.callBackType = (val) => {
@ -24,6 +27,13 @@ const AppComponent = memo(function AppComponent(props) {
// console.log(`onTimeChange`, val);
};
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);
};
const onError = () => {
@ -51,12 +61,6 @@ const AppComponent = memo(function AppComponent(props) {
};
useEffect(() => {
if (videoRef.current) {
setTimeout(() => {
videoRef.current.video.play();
}, 1000);
console.log(`object`, videoRef.current.play);
// videoRef.current.play();
}
console.log(`videoRef.current`, videoRef.current);
@ -66,11 +70,11 @@ const AppComponent = memo(function AppComponent(props) {
<JoLPlayer
ref={videoRef}
option={{
videoSrc:
'https://gs-files.oss-cn-hongkong.aliyuncs.com/okr/test/file/2021/07/01/haiwang.mp4',
videoSrc: url.current,
width: 750,
height: 420,
theme: '#00D3FF',
poster: 'https://cdn.gudsen.com/2021/06/28/f81356b08b4842d7a3719499f557c8e4.JPG',
}}
onProgressMouseDown={onProgressMouseDown}
onPlay={onPlay}

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

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

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

Loading…
Cancel
Save