yexuejc007/PlayEdu-frontend
1
0
Fork 0
mirror of https://github.com/PlayEdu/frontend.git synced 2025-06-30 06:44:18 +08:00
Code Issues Packages Projects Releases Wiki Activity

视频播放以及播放记录上传优化

Browse Source
This commit is contained in:
禺狨 2023-03-27 15:16:33 +08:00
parent 3935fea2a9
commit 56cc7ac3da
2 changed files with 10 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/pages/course/compenents/video.module.scss
View File

@ -63,7 +63,7 @@
.video-box { .video-box {
width: 1200px; width: 1200px;
height: 600px; height: 675px;
margin: 0 auto; margin: 0 auto;
border-radius: 8px; border-radius: 8px;
overflow: hidden; overflow: hidden;

14
src/pages/course/compenents/video.tsx
View File

@ -1,4 +1,4 @@
import React, { useState, useEffect } from "react"; import React, { useState, useRef, useEffect } from "react";
import styles from "./video.module.scss"; import styles from "./video.module.scss";
import { course } from "../../../api/index"; import { course } from "../../../api/index";
import { ArrowLeftOutlined } from "@ant-design/icons"; import { ArrowLeftOutlined } from "@ant-design/icons";
@ -22,6 +22,7 @@ export const VideoModel: React.FC<PropInterface> = ({
}) => { }) => {
const [playUrl, setPlayUrl] = useState<string>(""); const [playUrl, setPlayUrl] = useState<string>("");
const [playDuration, setPlayDuration] = useState(0); const [playDuration, setPlayDuration] = useState(0);
const myRef = useRef(0);
useEffect(() => { useEffect(() => {
if (open) { if (open) {
@ -29,6 +30,10 @@ export const VideoModel: React.FC<PropInterface> = ({
} }
}, [open, id, cid]); }, [open, id, cid]);
useEffect(() => {
myRef.current = playDuration;
}, [playDuration]);
const getVideoUrl = () => { const getVideoUrl = () => {
course.playUrl(cid, id).then((res: any) => { course.playUrl(cid, id).then((res: any) => {
setPlayUrl(res.data.url); setPlayUrl(res.data.url);
@ -41,12 +46,11 @@ export const VideoModel: React.FC<PropInterface> = ({
container: document.getElementById("meedu-player-container"), container: document.getElementById("meedu-player-container"),
autoplay: false, autoplay: false,
video: { video: {
quality: playUrl, url: playUrl,
defaultQuality: 0,
}, },
try: isTrySee === 1, try: isTrySee === 1,
bulletSecret: { bulletSecret: {
enabled: true, enabled: false,
text: "18119604035", text: "18119604035",
size: "15px", size: "15px",
color: "red", color: "red",
@ -67,7 +71,7 @@ export const VideoModel: React.FC<PropInterface> = ({
}; };
const playTimeUpdate = (duration: number, isEnd: boolean) => { const playTimeUpdate = (duration: number, isEnd: boolean) => {
if (duration - playDuration >= 10 || isEnd === true) { if (duration - myRef.current >= 10 || isEnd === true) {
setPlayDuration(duration); setPlayDuration(duration);
course.record(cid, id, duration).then((res: any) => {}); course.record(cid, id, duration).then((res: any) => {});
} }