diff --git a/admin/src/pages/examinationrules/normal/components/AutoSelector.tsx b/admin/src/pages/examinationrules/normal/components/AutoSelector.tsx index d7d7a46..7ca58ad 100644 --- a/admin/src/pages/examinationrules/normal/components/AutoSelector.tsx +++ b/admin/src/pages/examinationrules/normal/components/AutoSelector.tsx @@ -78,7 +78,7 @@ const AutoSelector = (props: any, ref: any) => { //key: 'code', dataIndex: `type${item?.code}`, render: ( item, { defaultRender, ...rest }, form) => { - return { // const _data = []; @@ -140,20 +140,6 @@ const AutoSelector = (props: any, ref: any) => { // setDataSource }} toolBarRender={false} -/* - editable={{ - type: 'multiple', - //editableKeys, - actionRender: (row, config, defaultDoms) => { - return [defaultDoms.delete]; - }, - onValuesChange: (record, recordList) => { - console.log('rrrr',record, recordList) - // setDataSource(recordList); - }, - //onChange: setEditableRowKeys, - }} -*/ /> ); diff --git a/admin/src/pages/questionbank/index.tsx b/admin/src/pages/questionbank/index.tsx index ca37717..99206b8 100644 --- a/admin/src/pages/questionbank/index.tsx +++ b/admin/src/pages/questionbank/index.tsx @@ -664,7 +664,7 @@ const QuestionBank = () => { valueType: 'select', dataIndex: 'tag_ids', fieldProps: { - mode: "multiple" + //mode: "multiple" }, request: async () => { const { data: Items } = await queryTagList({}); diff --git a/web/src/pages/course/components/VideoJS.tsx b/web/src/pages/course/components/VideoJS.tsx new file mode 100644 index 0000000..4b67e9a --- /dev/null +++ b/web/src/pages/course/components/VideoJS.tsx @@ -0,0 +1,80 @@ +import React, {forwardRef, useEffect,useImperativeHandle,useState} from "react"; +import videojs from "video.js"; +import "video.js/dist/video-js.css"; +import "videojs-contrib-hls"; + +// React.forwardRef 接受渲染函数作为参数。React 将使用 props 和 ref 作为参数来调用此函数。此函数应返回 React 节点。 +const VideoJS = ( props: any, ref: any) => { + //const [count,setCount]=useState(0); + //const countRef=React.useRef(count); + const videoRef = React.useRef(null); + const playerRef = React.useRef(null); + const { options, onReady, } = props; + + useEffect(() => { + if (!playerRef.current) { + const videoElement = videoRef.current; + if (!videoElement) return; + const player = playerRef.current = videojs(videoElement, options, () => { + // console.log("player is ready"); + onReady && onReady(player); + }); + } else { + // you can update player here [update player through props] + const player = playerRef.current; + player.src(options.sources[0].src); + // player.autoplay(true); + videoRef.current.addEventListener('play',()=>{ + console.log('播放'); + //setCount(player.currentTime()); + //playerRef.current.currentTime(count) + // player.currentTime(count) + // getTime(player.currentTime()); + // saveLearning(); + }); + videoRef.current.addEventListener('pause',()=>{ + console.log('停止了') + }) + } + }, [options]); + + // useEffect(()=>{ + // videoRef.current.addEventListener() + // },[]); +/* + useEffect(()=>{ + countRef.current=count; + },[count]) +*/ +/* + if(count!==0){ + if(countRef.current.toFixed(2)!==count.toFixed(2)){ + // console.log('countRef.current前一次',countRef.current.toFixed(2)); + // console.log('count这一次',count.toFixed(2)) + getTime(count.toFixed(2)); + saveLearning(count); + } + } +*/ + // 暴露组件的方法 接受外部获取的ref + useImperativeHandle(ref, () => ({ + // 构造ref的获取数据方法 + currentTime: (time: number) => { + if(time){ + playerRef?.current?.currentTime(time) + } + return playerRef?.current?.currentTime() || 0 + }, + })); + + return ( +
+
+ ); +} +// forwardRef这个组件能够将其接受的 ref 属性转发到其组件树下 +export default forwardRef( VideoJS ); \ No newline at end of file diff --git a/web/src/pages/course/components/VideoJS/index.tsx b/web/src/pages/course/components/VideoJS/index.tsx deleted file mode 100644 index 1b37c2a..0000000 --- a/web/src/pages/course/components/VideoJS/index.tsx +++ /dev/null @@ -1,68 +0,0 @@ -import React, {useEffect,useState} from "react"; -import videojs from "video.js"; -import "video.js/dist/video-js.css"; -import "videojs-contrib-hls"; -export const VideoJS = ( props: any ) => { - const [count,setCount]=useState(0); - const countRef=React.useRef(count); - const videoRef = React.useRef(null); - const playerRef = React.useRef(null); - const { options, onReady,saveLearning,getTime } = props; - React.useEffect(() => { - if (!playerRef.current) { - const videoElement = videoRef.current; - if (!videoElement) return; - const player = playerRef.current = videojs(videoElement, options, () => { - // console.log("player is ready"); - onReady && onReady(player); - }); - } else { - // you can update player here [update player through props] - const player = playerRef.current; - player.src(options.sources[0].src); - // player.autoplay(true); - videoRef.current.addEventListener('play',()=>{ - console.log('播放'); - setCount(player.currentTime()); - playerRef.current.currentTime(count) - // player.currentTime(count) - // getTime(player.currentTime()); - // saveLearning(); - }); - videoRef.current.addEventListener('pause',()=>{ - console.log('停止了') - }) - - } - - }, [options]); - // useEffect(()=>{ - // videoRef.current.addEventListener() - // },[]); - - React.useEffect(()=>{ - countRef.current=count; - },[count]) - - - if(count!==0){ - if(countRef.current.toFixed(2)!==count.toFixed(2)){ - // console.log('countRef.current前一次',countRef.current.toFixed(2)); - // console.log('count这一次',count.toFixed(2)) - getTime(count.toFixed(2)); - saveLearning(count); - - } - } - - - return ( -
-
- ); - } diff --git a/web/src/pages/course/detail/index.tsx b/web/src/pages/course/detail/index.tsx index c831c9e..c59d0a6 100644 --- a/web/src/pages/course/detail/index.tsx +++ b/web/src/pages/course/detail/index.tsx @@ -9,10 +9,11 @@ import styles from './style.less'; import { Content } from 'antd/lib/layout/layout'; import Sider from 'antd/lib/layout/Sider'; import SubMenu from 'antd/lib/menu/SubMenu'; -import { VideoJS } from '../components/VideoJS'; + import { useRef } from 'react'; import {listMyLearningChapterCourse1, viewCourseGetMyLearning,saveMyLearning} from './service'; import cookie from 'react-cookies'; +import VideoJS from '../components/VideoJS'; const { Paragraph } = Typography; const CardList = () => { @@ -64,7 +65,6 @@ const CardList = () => { }); }); - /** 首次页面 当data 变化 执行run， chapterCourse 变化 进行currentCourse赋值 */ useEffect(() => { if(data !== undefined && data !== null){ @@ -162,52 +162,50 @@ const CardList = () => { { - videoInfo.url && 加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持） - language: 'zh-CN', - aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"） - fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。 - sources: [ - { - // src: 'http://10.10.24.121:8000/dsideal_yy/html/'+videoInfo.url, - src: videoInfo.url, - type: 'application/x-mpegURL' - } - ], - poster: videoInfo.img, // 你的封面地址 - width: document.documentElement.clientWidth, - notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。 - controlBar: { - timeDivider: true, - durationDisplay: true, - remainingTimeDisplay: true, - fullscreenToggle: true // 全屏按钮 - } - - - }} - onReady={(play: any)=>{ - console.log('play====',play); - videoRef.current = play; - play.play() - }} - saveLearning={()=>{saveLearning()}} - getTime={(info)=>{ - // setTime(info); - time=info; - console.log('接收的秒数',info) - }} - /> - } + videoInfo.url && 加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持） + language: 'zh-CN', + aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"） + fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。 + sources: [ + { + // src: 'http://10.10.24.121:8000/dsideal_yy/html/'+videoInfo.url, + src: videoInfo.url, + type: 'application/x-mpegURL' + } + ], + poster: videoInfo.img, // 你的封面地址 + width: document.documentElement.clientWidth, + notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。 + controlBar: { + timeDivider: true, + durationDisplay: true, + remainingTimeDisplay: true, + fullscreenToggle: true // 全屏按钮 + } + }} + ref={videoRef} + /> + } + { + const data = videoRef?.current?.currentTime(); + console.log('getData', data) + }}>videoRef get + + { + const data = videoRef?.current?.currentTime(300); + console.log('setData', data) + }}>videoRef set + ); };