1.视频播放结束的考题 & 自动播放下一个

2.视频播放过程中的暂停和返回继续播放
main
king 1 year ago
parent c14a20b394
commit ab5241ebbf
  1. 2
      src/components/lineChart/lineChart.module.scss
  2. 1
      src/components/lineChart/lineChart.tsx
  3. 18
      src/components/video/video.tsx
  4. 1
      src/pages/business/test/test.tsx
  5. 1
      src/pages/business/videoInfo/components/course.tsx
  6. 13
      src/pages/business/videoInfo/videoInfo.tsx
  7. 2
      src/pages/manage/userInfo/userInfo.tsx

@ -3,7 +3,7 @@
align-items: flex-end; align-items: flex-end;
justify-content: left; justify-content: left;
flex-wrap: nowrap; flex-wrap: nowrap;
height: 400px; height: 420px;
} }
.columnBox { .columnBox {

@ -30,6 +30,7 @@ const LineChart: FC<Props> = ({data}) => {
lineChartList.map(d => <View key={d.time}> lineChartList.map(d => <View key={d.time}>
<View className={style.columnBox} style={{width: "100px"}}> <View className={style.columnBox} style={{width: "100px"}}>
<View className={style.line} style={{height: height - 10 - (d.value / maxHeight * height) + "px"}}></View> <View className={style.line} style={{height: height - 10 - (d.value / maxHeight * height) + "px"}}></View>
<View>{d.value}</View>
<View className={style.column} style={{height: d.value / maxHeight * height + "px"}}> </View> <View className={style.column} style={{height: d.value / maxHeight * height + "px"}}> </View>
<View>{d.time}</View> <View>{d.time}</View>
</View> </View>

@ -7,14 +7,14 @@ import unique_ident from "@/hooks/unique_ident";
const deviation: number = 1 const deviation: number = 1
const HVideo: FC<HVideoOptions> = (opt: HVideoOptions) => { const HVideo: FC<HVideoOptions> = (opt: HVideoOptions) => {
let video let video: Taro.VideoContext
try {
video = Taro.createVideoContext('myVideo')
} catch (e) {
}
const [currentTime, setCurrentTime] = useState(0) const [currentTime, setCurrentTime] = useState(0)
try {
video = Taro.createVideoContext('myVideo')
} catch (e) {}
function onTimeUpdate(event: BaseEventOrig<VideoProps.onTimeUpdateEventDetail>) { function onTimeUpdate(event: BaseEventOrig<VideoProps.onTimeUpdateEventDetail>) {
// if (opt.preview) return; // if (opt.preview) return;
const time = event.detail.currentTime const time = event.detail.currentTime
@ -53,10 +53,16 @@ const HVideo: FC<HVideoOptions> = (opt: HVideoOptions) => {
} }
Taro.useDidHide(() => { Taro.useDidHide(() => {
video?.stop() video?.pause()
unique_ident.put(Number(currentTime.toFixed(2)), Date.now()) unique_ident.put(Number(currentTime.toFixed(2)), Date.now())
}) })
Taro.useDidShow(()=>{
if(!video){
video = Taro.createVideoContext('myVideo')
video.play()
}
})
return ( return (
<Video <Video

@ -36,6 +36,7 @@ const Test = () => {
setAnswers(record) setAnswers(record)
} }
useEffect(() => { useEffect(() => {
if (answers.length) { if (answers.length) {

@ -186,6 +186,7 @@ const Course: FC<Props> = ({id, courseId, preview, curEnd}: Props) => {
position='bottom' position='bottom'
round round
onAfterLeave={again} onAfterLeave={again}
onClickOverlay={again}
> >
<Swiper <Swiper
style={{height: "60vh"}} style={{height: "60vh"}}

@ -14,6 +14,9 @@ const VideoInfo: FC = () => {
const [preview, setPreview] = useState(false) const [preview, setPreview] = useState(false)
const [playing, setPlaying] = useState(false) const [playing, setPlaying] = useState(false)
// Taro.useSaveExitState(() => ({
// data: {playId}
// }))
const getData = useCallback(async () => { const getData = useCallback(async () => {
const res = await curriculum.courseDep(id, depId) const res = await curriculum.courseDep(id, depId)
@ -25,10 +28,10 @@ const VideoInfo: FC = () => {
} }
}, [playing]) }, [playing])
function curEnd() { const curEnd = useCallback(() => {
setPlaying(false) setPlaying(false)
getData().then() getData().then()
} }, [data, playing, playId])
function setHors(is_complete: boolean, play_id: number) { function setHors(is_complete: boolean, play_id: number) {
setPlaying(true) setPlaying(true)
@ -38,7 +41,7 @@ const VideoInfo: FC = () => {
useEffect(() => { useEffect(() => {
getData() getData()
}, []) }, [id])
/** 播放下一个视频 */ /** 播放下一个视频 */
@ -75,7 +78,9 @@ const VideoInfo: FC = () => {
const courseHourRecordsFinish = data?.learn_hour_records.find(d => d.id === playId)?.courseHourRecordsFinish const courseHourRecordsFinish = data?.learn_hour_records.find(d => d.id === playId)?.courseHourRecordsFinish
if (typeof courseHourRecordsFinish === 'number') { if (typeof courseHourRecordsFinish === 'number') {
if (courseHourRecordsFinish === 1) { if (courseHourRecordsFinish === 1) {
playNext() if (!playing) {
playNext()
}
} else { } else {
Taro.showModal({ Taro.showModal({
title: '有考卷还未完成', title: '有考卷还未完成',

@ -106,7 +106,7 @@ const UserInfo: FC = () => {
<Tabs tabList={tabList} onChange={tabChange}/> <Tabs tabList={tabList} onChange={tabChange}/>
<View className='font-weight font-36 mt-5 mb-3'> <View className='font-weight font-36 mt-5 mb-3'>
<Text style={{margin: '0 10px', color: '#00D6AC'}}>121212</Text> <Text style={{margin: '0 10px', color: '#00D6AC'}}>{lineData.reduce((pre, cur) => pre + cur.value, 0)}</Text>
</View> </View>
<LineChart data={lineData}/> <LineChart data={lineData}/>

Loading…
Cancel
Save