检测视频重复播放

This commit is contained in:
unknown 2023-09-22 16:46:43 +08:00
parent 7a64180d04
commit 1fbe67f228
3 changed files with 50 additions and 0 deletions

View File

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

View File

@ -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 && (

View File

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