diff --git a/apps/web-main/src/components/Card/index.less b/apps/web-main/src/components/Card/index.less
new file mode 100644
index 0000000..aaf5726
--- /dev/null
+++ b/apps/web-main/src/components/Card/index.less
@@ -0,0 +1,26 @@
+.bs-card {
+ .arco-card-body {
+ padding: 10px;
+ }
+ .mask {
+ height: 164px;
+ background-color: rgba(0, 0, 0, 0.3);
+ overflow: hidden;
+ .cover {
+ height: 100%;
+ background-size: cover;
+ }
+ }
+ .bottom-des {
+ display: flex;
+ justify-content: space-between;
+ span {
+ flex: 1;
+ color: var(--color-text-3);
+ }
+ a {
+ cursor: pointer;
+ color: rgb(var(--primary-6));
+ }
+ }
+}
diff --git a/apps/web-main/src/components/Card/index.tsx b/apps/web-main/src/components/Card/index.tsx
new file mode 100644
index 0000000..77d4ae0
--- /dev/null
+++ b/apps/web-main/src/components/Card/index.tsx
@@ -0,0 +1,36 @@
+import { Card } from "@arco-design/web-react";
+import { url } from "inspector";
+import "./index.less";
+const { Meta } = Card;
+
+function BsCard() {
+ return (
+
+
+
+ }
+ >
+
+ card description
+ Go
+
+ }
+ />
+
+ );
+}
+
+export default BsCard;
diff --git a/apps/web-main/src/components/Nav/index.less b/apps/web-main/src/components/Nav/index.less
index 1145046..de52543 100644
--- a/apps/web-main/src/components/Nav/index.less
+++ b/apps/web-main/src/components/Nav/index.less
@@ -2,7 +2,7 @@ header {
position: fixed;
left: 0;
right: 0;
- z-index: 1994;
+ z-index: 19;
height: 60px;
background: #24292f;
color: #d7d7d7;
diff --git a/apps/web-main/src/components/Player/index.tsx b/apps/web-main/src/components/Player/index.tsx
index d9e987b..16d5067 100644
--- a/apps/web-main/src/components/Player/index.tsx
+++ b/apps/web-main/src/components/Player/index.tsx
@@ -1,12 +1,23 @@
+import { useRef } from "react";
import { useLink, useMount, useScript } from "../../hook";
import "./index.less";
+interface IVideo {
+ fileID: string;
+ appID: string;
+ psign?: string;
+}
+
/**
+ * demo页面:https://tcplayer.vcube.tencent.com/
+ *
* 如果需要在 Chrome 和 Firefox 等现代浏览器中通过 H5 播放 Webrtc 视频, 需要在 tcplayer.vx.x.x.min.js 之前引入 TXLivePlayer-x.x.x.min.js。
* 有些浏览器环境不支持 Webrtc,播放器会将 Webrtc 流地址自动转换为 HLS 格式地址,因此快直播场景同样需要引入hls.min.x.xx.xm.js。
* fill填满变形,cover等比例会裁剪, contain等比例有黑边
*/
function Player() {
+ const playerRef = useRef();
+
useLink(["/player/tcplayer_pure.min.css"]);
useScript(
["/player/libs/hls.min.0.13.2m.js", "/player/tcplayer.v4.7.2.min.js"],
@@ -28,7 +39,7 @@ function Player() {
);
return el;
};
- const player = TCPlayer("player", {
+ playerRef.current = TCPlayer("player", {
fileID: "243791579995468466",
appID: "1500018521",
//私有加密播放需填写 psign, psign 即播放器签名,签名介绍和生成方式参见链接:https://cloud.tencent.com/document/product/266/42436
@@ -37,6 +48,13 @@ function Player() {
}
);
+ /**
+ * 切换视频
+ */
+ const changeVideo = (video: IVideo) => {
+ playerRef.current!.loadVideoByID({ ...video });
+ };
+
return (