mozzie/web-backset.cn
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 滚动

Browse Source
This commit is contained in:
mozzie 2023-03-01 23:59:13 +08:00
parent d66a606053
commit f8be92ddde
4 changed files with 35 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
apps/web-main/index.html
View File

@ -1,13 +1,16 @@
<!DOCTYPE html>
<html lang="en">
<html>
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React + TS</title>
<link rel="stylesheet" href="/player/tcplayer_pure.min.css" />
</head>
<body>
<div id="bs-app"></div>
<script type="module" src="/src/main.tsx"></script>
<script src="/player/libs/hls.min.0.13.2m.js"></script>
<script src="/player/tcplayer.v4.7.2.min.js"></script>
</body>
</html>

2
apps/web-main/src/components/Player/index.less
View File

@ -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);

42
apps/web-main/src/components/Player/index.tsx
View File

@ -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<any>();
const [videoInfo, setVideoInfo] = useState<IVideo>({
fileID: "",
appID: "",
});
const videoRef = useRef<HTMLVideoElement | null>(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 (
<video
onContextMenu={(e) => e.preventDefault()}
id="player_html5_api"
id={`video-${videoInfo.fileID}`}
ref={videoRef}
style={{ width: "100%", height: "100%", objectFit: "contain" }}
preload="auto"
playsInline

2
apps/web-main/src/hook/index.tsx
View File

@ -50,7 +50,7 @@ export const useScript = (urls: string[], func: Function) => {
.querySelectorAll(`[script-type='hook']`)
.forEach((script) => document.body.removeChild(script));
};
}, [urls]);
}, []);
};
/**