70 lines
1.6 KiB
TypeScript
70 lines
1.6 KiB
TypeScript
import { useEffect, useRef, useState } from "react";
|
||
import { useScript } from "../../../../hook";
|
||
import "./index.less";
|
||
|
||
export interface IVideo {
|
||
fileID: string;
|
||
appID: string;
|
||
psign?: string;
|
||
className?: string;
|
||
}
|
||
|
||
interface IProps {
|
||
video: IVideo | null;
|
||
}
|
||
|
||
/**
|
||
* demo页面：https://tcplayer.vcube.tencent.com/
|
||
*
|
||
* 1. fill填满变形，cover等比例会裁剪, contain等比例有黑边
|
||
* 2. TCPlayer('container', video)如果video为空，初始化会失败
|
||
*/
|
||
function Player(props: IProps) {
|
||
const playerRef = useRef<any>();
|
||
const [libReady, setLibReady] = useState(false);
|
||
|
||
useScript(
|
||
["/player/libs/hls.min.0.13.2m.js", "/player/tcplayer.v4.7.2.min.js"],
|
||
() => {
|
||
console.log("[tcplayer] libs ready...");
|
||
setLibReady(true);
|
||
}
|
||
);
|
||
|
||
useEffect(() => {
|
||
if (libReady) {
|
||
const TCPlayer = (window as any).TCPlayer;
|
||
playerRef.current = TCPlayer("player", {
|
||
// fileID: "243791579995468466",
|
||
// appID: "1500018521",
|
||
...props.video,
|
||
plugins: {
|
||
ContinuePlay: {
|
||
auto: true,
|
||
},
|
||
},
|
||
});
|
||
console.log("[tcplayer] init success...");
|
||
}
|
||
}, [libReady]);
|
||
|
||
useEffect(() => {
|
||
if (props.video) {
|
||
console.log("[tcplayer] video change", props.video);
|
||
playerRef.current.loadVideoByID(props.video);
|
||
}
|
||
}, [props.video]);
|
||
|
||
return (
|
||
<video
|
||
onContextMenu={(e) => e.preventDefault()}
|
||
id="player"
|
||
style={{ width: "100%", height: "100%", objectFit: "contain" }}
|
||
preload="auto"
|
||
playsInline
|
||
></video>
|
||
);
|
||
}
|
||
|
||
export default Player;
|