Merge branch 'master' of http://10.10.14.176:3000/web/syzx
commit
b9a52b50da
@ -1,61 +1,40 @@
|
||||
import React, {forwardRef, useEffect,useImperativeHandle,useState} from "react";
|
||||
import React, { useEffect } 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) => {
|
||||
export const VideoJS = ( props: any ) => {
|
||||
|
||||
const videoRef = React.useRef(null);
|
||||
const playerRef = React.useRef<any>(null);
|
||||
const { options, onReady, width, height } = props;
|
||||
|
||||
console.log('props', props)
|
||||
useEffect(() => {
|
||||
|
||||
// make sure Video.js player is only initialized once
|
||||
if (!playerRef.current) {
|
||||
const videoElement = videoRef.current;
|
||||
if (!videoElement) return;
|
||||
|
||||
const player = playerRef.current = videojs(videoElement, options, () => {
|
||||
// console.log("player is ready");
|
||||
console.log("player is ready");
|
||||
onReady && onReady(player);
|
||||
});
|
||||
} else {
|
||||
// you can update player here [update player through props]
|
||||
const player = playerRef.current;
|
||||
console.log('playerplayerplayer===',player);
|
||||
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]);
|
||||
player.autoplay(true);
|
||||
|
||||
// 暴露组件的方法 接受外部获取的ref
|
||||
useImperativeHandle(ref, () => ({
|
||||
// 构造ref的获取数据方法
|
||||
currentTime: (time: number) => {
|
||||
if(time){
|
||||
playerRef?.current?.currentTime(time)
|
||||
}
|
||||
return playerRef?.current?.currentTime() || 0
|
||||
},
|
||||
}));
|
||||
}, [options, videoRef]);
|
||||
|
||||
return (
|
||||
<div data-vjs-player>
|
||||
<video style={{
|
||||
width: width || '100%',
|
||||
height:'auto'
|
||||
height: height || 'auto'
|
||||
}} ref={videoRef} className="video-js vjs-big-play-centered" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
// forwardRef这个组件能够将其接受的 ref 属性转发到其组件树下
|
||||
export default forwardRef( VideoJS );
|
||||
Loading…
Reference in new issue