diff --git a/src/pages/course/compenents/video.module.scss b/src/pages/course/compenents/video.module.scss index faa99a3..0ab4fce 100644 --- a/src/pages/course/compenents/video.module.scss +++ b/src/pages/course/compenents/video.module.scss @@ -63,7 +63,7 @@ .video-box { width: 1200px; - height: 600px; + height: 675px; margin: 0 auto; border-radius: 8px; overflow: hidden; diff --git a/src/pages/course/compenents/video.tsx b/src/pages/course/compenents/video.tsx index a7a68ad..1993e66 100644 --- a/src/pages/course/compenents/video.tsx +++ b/src/pages/course/compenents/video.tsx @@ -1,4 +1,4 @@ -import React, { useState, useEffect } from "react"; +import React, { useState, useRef, useEffect } from "react"; import styles from "./video.module.scss"; import { course } from "../../../api/index"; import { ArrowLeftOutlined } from "@ant-design/icons"; @@ -22,6 +22,7 @@ export const VideoModel: React.FC = ({ }) => { const [playUrl, setPlayUrl] = useState(""); const [playDuration, setPlayDuration] = useState(0); + const myRef = useRef(0); useEffect(() => { if (open) { @@ -29,6 +30,10 @@ export const VideoModel: React.FC = ({ } }, [open, id, cid]); + useEffect(() => { + myRef.current = playDuration; + }, [playDuration]); + const getVideoUrl = () => { course.playUrl(cid, id).then((res: any) => { setPlayUrl(res.data.url); @@ -41,12 +46,11 @@ export const VideoModel: React.FC = ({ container: document.getElementById("meedu-player-container"), autoplay: false, video: { - quality: playUrl, - defaultQuality: 0, + url: playUrl, }, try: isTrySee === 1, bulletSecret: { - enabled: true, + enabled: false, text: "18119604035", size: "15px", color: "red", @@ -67,7 +71,7 @@ export const VideoModel: React.FC = ({ }; const playTimeUpdate = (duration: number, isEnd: boolean) => { - if (duration - playDuration >= 10 || isEnd === true) { + if (duration - myRef.current >= 10 || isEnd === true) { setPlayDuration(duration); course.record(cid, id, duration).then((res: any) => {}); }