diff --git a/apps/web-main/src/components/Nav/index.tsx b/apps/web-main/src/components/Nav/index.tsx
index ce2b6ea..5f2ad75 100644
--- a/apps/web-main/src/components/Nav/index.tsx
+++ b/apps/web-main/src/components/Nav/index.tsx
@@ -23,11 +23,14 @@ function Nav() {
Backset
- {routerList.map((route) => (
- navigate(route.path)}>
- {route.name}
-
- ))}
+ {routerList.map(
+ (route) =>
+ !route.invisible && (
+ navigate(route.path)}>
+ {route.name}
+
+ )
+ )}
diff --git a/apps/web-main/src/components/Player/index.less b/apps/web-main/src/components/Player/index.less
index 8d17a14..485182c 100644
--- a/apps/web-main/src/components/Player/index.less
+++ b/apps/web-main/src/components/Player/index.less
@@ -37,7 +37,6 @@
}
// 圆角
-
.vjs-poster,
.video-js {
border-radius: 10px !important;
diff --git a/apps/web-main/src/components/Player/index.tsx b/apps/web-main/src/components/Player/index.tsx
index 0f31b9c..c3f37e6 100644
--- a/apps/web-main/src/components/Player/index.tsx
+++ b/apps/web-main/src/components/Player/index.tsx
@@ -1,14 +1,18 @@
-import { useRef } from "react";
+import { useEffect, useRef } from "react";
import { useLink, useMount, useScript } from "../../hook";
import "./index.less";
-interface IVideo {
+export interface IVideo {
fileID: string;
appID: string;
psign?: string;
className?: string;
}
+interface IProps {
+ video: IVideo | null;
+}
+
/**
* demo页面:https://tcplayer.vcube.tencent.com/
*
@@ -16,50 +20,44 @@ interface IVideo {
* 有些浏览器环境不支持 Webrtc,播放器会将 Webrtc 流地址自动转换为 HLS 格式地址,因此快直播场景同样需要引入hls.min.x.xx.xm.js。
*
fill填满变形,cover等比例会裁剪, contain等比例有黑边
*/
-function Player() {
+function Player(props: IProps) {
const playerRef = useRef
();
+ const initPlayer = (video: IVideo) => {
+ const TCPlayer = (window as any).TCPlayer;
+
+ // 重写播放按钮
+ const Button = TCPlayer.getComponent("Button");
+ const BigPlayButton = TCPlayer.getComponent("BigPlayButton");
+ BigPlayButton.prototype.createEl = function () {
+ const el = Button.prototype.createEl.call(this);
+ const _html =
+ '';
+ el.appendChild(
+ TCPlayer.dom.createEl("div", {
+ className: "vjs-button-icon-custom",
+ innerHTML: _html,
+ })
+ );
+ return el;
+ };
+ playerRef.current = TCPlayer("player_html5_api", video);
+ };
+
useLink(["/player/tcplayer_pure.min.css"]);
useScript(
["/player/libs/hls.min.0.13.2m.js", "/player/tcplayer.v4.7.2.min.js"],
() => {
- const TCPlayer = (window as any).TCPlayer;
-
- // 重写播放按钮
- const Button = TCPlayer.getComponent("Button");
- const BigPlayButton = TCPlayer.getComponent("BigPlayButton");
- BigPlayButton.prototype.createEl = function () {
- const el = Button.prototype.createEl.call(this);
- const _html =
- '';
- el.appendChild(
- TCPlayer.dom.createEl("div", {
- className: "vjs-button-icon-custom",
- innerHTML: _html,
- })
- );
- return el;
- };
- playerRef.current = TCPlayer("player", {
- fileID: "243791579995468466",
- appID: "1500018521",
- //私有加密播放需填写 psign, psign 即播放器签名,签名介绍和生成方式参见链接:https://cloud.tencent.com/document/product/266/42436
- //psign:'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6MTUwMDAwNTY5NiwiZmlsZUlkIjoiMzcwMTkyNTkyMTI5OTYzNzAxMCIsImN1cnJlbnRUaW1lU3RhbXAiOjE2MjY4NjAxNzYsImV4cGlyZVRpbWVTdGFtcCI6MjYyNjg1OTE3OSwicGNmZyI6InByaXZhdGUiLCJ1cmxBY2Nlc3NJbmZvIjp7InQiOiI5YzkyYjBhYiJ9LCJkcm1MaWNlbnNlSW5mbyI6eyJleHBpcmVUaW1lU3RhbXAiOjI2MjY4NTkxNzksInN0cmljdE1vZGUiOjJ9fQ.Bo5K5ThInc4n8AlzIZQ-CP9a49M2mEr9-zQLH9ocQgI',
- });
+ console.log("执行了", playerRef.current);
+ playerRef.current = null;
+ if (props.video) initPlayer(props.video);
}
);
- /**
- * 切换视频
- */
- const changeVideo = (video: IVideo) => {
- playerRef.current!.loadVideoByID({ ...video });
- };
-
return (