mirror of
https://github.com/PlayEdu/frontend.git
synced 2025-06-06 15:34:10 +08:00
检测视频重复播放
This commit is contained in:
parent
7a64180d04
commit
1fbe67f228
@ -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;
|
||||
|
@ -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 && (
|
||||
|
@ -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");
|
||||
}
|
||||
|
Loading…
x
Reference in New Issue
Block a user