diff --git a/apps/web-main/index.html b/apps/web-main/index.html
index bd6d0c2..e8d2d62 100644
--- a/apps/web-main/index.html
+++ b/apps/web-main/index.html
@@ -1,13 +1,16 @@
-
+
Vite + React + TS
+
+
+
diff --git a/apps/web-main/src/components/Player/index.less b/apps/web-main/src/components/Player/index.less
index 485182c..8688eb5 100644
--- a/apps/web-main/src/components/Player/index.less
+++ b/apps/web-main/src/components/Player/index.less
@@ -1,7 +1,7 @@
.vjs-button-icon-custom {
cursor: pointer;
> svg {
- transition: all 0.25s;
+ transition: color 0.25s;
color: rgba(37, 41, 47, 0.2);
&:hover {
color: rgba(37, 41, 47, 1);
diff --git a/apps/web-main/src/components/Player/index.tsx b/apps/web-main/src/components/Player/index.tsx
index c3f37e6..f1f679e 100644
--- a/apps/web-main/src/components/Player/index.tsx
+++ b/apps/web-main/src/components/Player/index.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, useState } from "react";
import { useLink, useMount, useScript } from "../../hook";
import "./index.less";
@@ -10,7 +10,7 @@ export interface IVideo {
}
interface IProps {
- video: IVideo | null;
+ video?: IVideo | null;
}
/**
@@ -22,6 +22,13 @@ interface IProps {
*/
function Player(props: IProps) {
const playerRef = useRef();
+ const [videoInfo, setVideoInfo] = useState({
+ fileID: "",
+ appID: "",
+ });
+ const videoRef = useRef(null);
+
+ console.log("执行一次");
const initPlayer = (video: IVideo) => {
const TCPlayer = (window as any).TCPlayer;
@@ -41,23 +48,32 @@ function Player(props: IProps) {
);
return el;
};
- playerRef.current = TCPlayer("player_html5_api", video);
+ playerRef.current = TCPlayer("player", video);
};
- useLink(["/player/tcplayer_pure.min.css"]);
- useScript(
- ["/player/libs/hls.min.0.13.2m.js", "/player/tcplayer.v4.7.2.min.js"],
- () => {
- console.log("执行了", playerRef.current);
- playerRef.current = null;
- if (props.video) initPlayer(props.video);
- }
- );
+ // useLink(["/player/tcplayer_pure.min.css"]);
+
+ // useScript(
+ // ["/player/libs/hls.min.0.13.2m.js", "/player/tcplayer.v4.7.2.min.js"],
+ // () => {}
+ // );
+
+ useEffect(() => {
+ if (props.video) setVideoInfo(props.video);
+ }, [props.video]);
+
+ // useEffect(() => {
+ // if (videoInfo.fileID !== "") {
+ // const TCPlayer = (window as any).TCPlayer;
+ // TCPlayer(`video-${videoInfo.fileID}`, videoInfo);
+ // }
+ // }, [videoInfo]);
return (