mirror of
https://github.com/tiajinsha/JKVideo.git
synced 2026-04-04 22:49:02 +08:00
43 lines
1.2 KiB
TypeScript
43 lines
1.2 KiB
TypeScript
/** Web shim for react-native-video - uses HTML5 <video> element */
|
|
import React from 'react';
|
|
|
|
interface VideoProps {
|
|
source?: { uri?: string } | number;
|
|
style?: React.CSSProperties;
|
|
paused?: boolean;
|
|
muted?: boolean;
|
|
repeat?: boolean;
|
|
onLoad?: (data: unknown) => void;
|
|
onError?: (error: unknown) => void;
|
|
onProgress?: (data: unknown) => void;
|
|
onEnd?: () => void;
|
|
resizeMode?: string;
|
|
[key: string]: unknown;
|
|
}
|
|
|
|
const Video = React.forwardRef<HTMLVideoElement, VideoProps>(
|
|
({ source, style, paused, muted, repeat, onLoad, onError, onProgress, onEnd }, ref) => {
|
|
const uri = typeof source === 'object' && source !== null ? (source as { uri?: string }).uri : undefined;
|
|
return (
|
|
<video
|
|
ref={ref}
|
|
src={uri}
|
|
style={style as React.CSSProperties}
|
|
autoPlay={!paused}
|
|
muted={muted}
|
|
loop={repeat}
|
|
onLoadedData={onLoad ? () => onLoad({}) : undefined}
|
|
onError={onError ? (e) => onError(e) : undefined}
|
|
onTimeUpdate={onProgress ? (e) => {
|
|
const t = e.currentTarget;
|
|
onProgress({ currentTime: t.currentTime, seekableDuration: t.duration });
|
|
} : undefined}
|
|
onEnded={onEnd}
|
|
playsInline
|
|
/>
|
|
);
|
|
}
|
|
);
|
|
|
|
export default Video;
|