Merge branch 'master' of http://10.10.14.176:3000/web/syzx
commit
73a1e7339f
@ -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<any>(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 (
|
||||
<div data-vjs-player>
|
||||
<video style={{
|
||||
width:'100%',
|
||||
height:'auto'
|
||||
}} ref={videoRef} className="video-js vjs-big-play-centered" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
// forwardRef这个组件能够将其接受的 ref 属性转发到其组件树下
|
||||
export default forwardRef( VideoJS );
|
||||
@ -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<any>(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 (
|
||||
<div data-vjs-player>
|
||||
<video style={{
|
||||
width:'100%',
|
||||
height:'auto'
|
||||
|
||||
}} ref={videoRef} className="video-js vjs-big-play-centered" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in new issue