课程学习设置播放进度

master
wangxi 3 years ago
parent 1ccad14781
commit c08a42fcf4

@ -23,6 +23,7 @@ const CardList = () => {
const [currentLearning, SetCurrentLearning] = useState();
const [courseId, SetCourseId] = useState(ids[1]);
const [video, setVideo] = useState({});
const [videoInfo, setVideoInfo] = useState({});
const [nums,setNums]=useState(0);
let timer=useRef();
let video_second=0;
@ -62,6 +63,7 @@ const CardList = () => {
info.url= '/dsideal_yy/html/'+result.course.attachment_json.url;
info.img=result.course.attachment_json.img;
}
setVideoInfo(result)
}else {
console.log(2222)
@ -101,11 +103,13 @@ const CardList = () => {
play_second:info.time,//当前播放时间点(秒数)
subject_id:learning?.learning.subject_id,//主题id
video_second:video_second,//视频总长度
})
});
num=0;
}
/** 首次页面 当data 变化 执行run chapterCourse 变化 进行currentCourse赋值 */
useEffect(() => {
console.log(111111111)
if(data !== undefined && data !== null){
run({course_id:ids[1]});
SetCurrentLearning(learning)
@ -115,6 +119,7 @@ const CardList = () => {
/** run后 chapterCourse 变化 进行currentCourse赋值 */
useEffect(() => {
console.log(22222222222)
if(data !== undefined){
SetCurrentLearning(learning)
}
@ -125,7 +130,7 @@ const CardList = () => {
//const videoInfo = {url:'http://cctvalih5ca.v.myalicdn.com/live/cctv1_2/index.m3u8', img:''}
//const videoInfo = {url:'https://media.w3.org/2010/05/sintel/trailer_hd.mp4', img:''}
const videoInfo = {url:'http://10.10.14.199/dsideal_yy/html/down/M3u8/2D/2D99BF1D-2F37-47FB-8A24-45112A236B8F.m3u8', img:''}//有视频
// const videoInfo = {url:'http://10.10.14.199/dsideal_yy/html/down/M3u8/2D/2D99BF1D-2F37-47FB-8A24-45112A236B8F.m3u8', img:''}//有视频
// const videoInfo=learning?.course.attachment_json;isg
const nullData: Partial<CardListItemDataType> = {};
@ -200,35 +205,37 @@ const CardList = () => {
}
}}
onReady={(play: any) => {
//console.log('play====', play);
playerRef.current = play
// play.play();
play.on('loadedmetadata',function (event) {
playerRef?.current?.currentTime(videoInfo.learning.play_second);
})
play.on('play',function (event) {
console.log('播放-------------------------------')
num=0;
timer.current=setInterval(()=>{;
// console.log('timer-----------',timer)
num++
if (parseInt(play.currentTime())>0&&parseInt(play.currentTime()) % 15 === 0) { // 每15秒更新进度
saveProcess({time:play.currentTime(),num:15})
}
},1000)
})
play.on("timeupdate", function (event) {
//const _timeCurrent = Date.parse(new Date().toString()) / 1000; // 当前时间
//setTimeUpdateState(_timeCurrent); //timeUpdateState
if(play.currentTime()===this.duration()){
console.log('播放完了',num)
clearInterval(timer.current)
saveProcess({time:play.currentTime(),num:num})
}
console.log('playcurrentTime--', Math.floor(play.currentTime()))
;
// console.log('playcurrentTime--', play.currentTime())
// console.log('play-%-', parseInt(play.currentTime()) % 30)
if (parseInt(play.currentTime())>0&&parseInt(play.currentTime()) % 30 === 0) { // 每15秒更新进度
console.log(11111111111)
saveProcess({time:play.currentTime(),num:30})
}
//var currentTime = parseInt(this.currentTime()); //当前时间
video_second = this.duration(); //视频时常
// console.log('duration',duration)
// console.log('duration',duration)1.695401-1.9.
//var percent = (currentTime / duration * 100).toFixed(0) + "%";
//console.log('event',event);
//$("#current").text(this.currentTime());
@ -248,10 +255,10 @@ const CardList = () => {
{/*console.log('getData', data)*/}
{/*}}>videoRef get</a>*/}
{/*<a onClick={()=>{*/}
{/*const data = videoRef?.current?.currentTime(300);*/}
{/*console.log('setData', data)*/}
{/*}}>videoRef set</a>*/}
<a onClick={()=>{
const data = playerRef?.current?.currentTime(25);
console.log('setData', data)
}}>videoRef set</a>
</PageContainer>

@ -209,6 +209,18 @@ export default () => {
{
label: '地理',
value: '地理',
},{
label: '政治',
value: '政治',
},{
label: '体育',
value: '体育',
},{
label: '音乐',
value: '音乐',
},{
label: '信息技术',
value: '信息技术',
},
]}
placeholder="请选择"

Loading…
Cancel
Save