检测视频重复播放

src/pages/course/video.module.scss

@@ -64,6 +64,7 @@
       margin: 0 auto;
       border-radius: 8px;
       position: relative;
+
       .alert-message {
         position: absolute;
         top: 0;
@@ -80,6 +81,12 @@
         font-size: 18px;
         color: white;
         z-index: 100;
+        .des-video {
+          font-size: 15px;
+          font-weight: 400;
+          color: #ffffff;
+          line-height: 15px;
+        }
         .alert-button {
           width: 200px;
           height: 54px;

src/pages/course/video.tsx

@@ -5,8 +5,10 @@ import { useSelector } from "react-redux";
 import { course as Course } from "../../api/index";
 import { ArrowLeftOutlined } from "@ant-design/icons";
 import { message } from "antd";
+import { getPlayId, savePlayId } from "../../utils";
 
 declare const window: any;
+var timer: any = null;
 
 const CoursePalyPage = () => {
   const navigate = useNavigate();
@@ -28,8 +30,10 @@ const CoursePalyPage = () => {
   const playRef = useRef(0);
   const watchRef = useRef(0);
   const totalRef = useRef(0);
+  const [checkPlayerStatus, setCheckPlayerStatus] = useState(false);
 
   useEffect(() => {
+    timer && clearInterval(timer);
     getCourse();
     getDetail();
     document.oncontextmenu = function (e) {
@@ -37,7 +41,9 @@ const CoursePalyPage = () => {
       e = e || window.event;
       return false;
     };
+
     return () => {
+      timer && clearInterval(timer);
       document.oncontextmenu = function (e) {
         /*恢复浏览器默认右键事件*/
         e = e || window.event;
@@ -123,6 +129,7 @@ const CoursePalyPage = () => {
       (res: any) => {
         setPlayUrl(res.data.url);
         initDPlayer(res.data.url, 0, data);
+        savePlayId(String(params.courseId) + "-" + String(params.hourId));
       }
     );
   };
@@ -185,6 +192,7 @@ const CoursePalyPage = () => {
       window.player && window.player.destroy();
     });
     setLoading(false);
+    checkPlayer();
   };
 
   const playTimeUpdate = (duration: number, isEnd: boolean) => {
@@ -201,6 +209,22 @@ const CoursePalyPage = () => {
     }
   };
 
+  const checkPlayer = () => {
+    timer = setInterval(() => {
+      let playId = getPlayId();
+      if (
+        playId &&
+        playId !== String(params.courseId) + "-" + String(params.hourId)
+      ) {
+        timer && clearInterval(timer);
+        window.player && window.player.destroy();
+        setCheckPlayerStatus(true);
+      } else {
+        setCheckPlayerStatus(false);
+      }
+    }, 5000);
+  };
+
   const goNextVideo = () => {
     const index = totalHours.findIndex(
       (i: any) => i.id === Number(params.hourId)
@@ -256,6 +280,13 @@ const CoursePalyPage = () => {
             id="meedu-player-container"
             style={{ borderRadius: 8 }}
           ></div>
+          {checkPlayerStatus && (
+            <div className={styles["alert-message"]}>
+              <div className={styles["des-video"]}>
+                您已打开新视频，暂停本视频播放
+              </div>
+            </div>
+          )}
           {playendedStatus && (
             <div className={styles["alert-message"]}>
               {isLastpage && (

src/utils/index.ts

@@ -111,3 +111,15 @@ export function isMobile() {
   );
   return flag;
 }
+
+export function getPlayId(): string {
+  return window.localStorage.getItem("playedu-play-id") || "";
+}
+
+export function savePlayId(id: string) {
+  window.localStorage.setItem("playedu-play-id", id);
+}
+
+export function clearPlayId() {
+  window.localStorage.removeItem("playedu-play-id");
+}