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 videojs from "video.js";
|
||||||
import "video.js/dist/video-js.css";
|
import "video.js/dist/video-js.css";
|
||||||
import "videojs-contrib-hls";
|
import "videojs-contrib-hls";
|
||||||
|
export const VideoJS = ( props: any ) => {
|
||||||
// React.forwardRef 接受渲染函数作为参数。React 将使用 props 和 ref 作为参数来调用此函数。此函数应返回 React 节点。
|
|
||||||
const VideoJS = ( props: any, ref: any) => {
|
|
||||||
|
|
||||||
const videoRef = React.useRef(null);
|
const videoRef = React.useRef(null);
|
||||||
const playerRef = React.useRef<any>(null);
|
const playerRef = React.useRef<any>(null);
|
||||||
const { options, onReady, width, height } = props;
|
const { options, onReady, width, height } = props;
|
||||||
|
console.log('props', props)
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
|
||||||
|
// make sure Video.js player is only initialized once
|
||||||
if (!playerRef.current) {
|
if (!playerRef.current) {
|
||||||
const videoElement = videoRef.current;
|
const videoElement = videoRef.current;
|
||||||
if (!videoElement) return;
|
if (!videoElement) return;
|
||||||
|
|
||||||
const player = playerRef.current = videojs(videoElement, options, () => {
|
const player = playerRef.current = videojs(videoElement, options, () => {
|
||||||
// console.log("player is ready");
|
console.log("player is ready");
|
||||||
onReady && onReady(player);
|
onReady && onReady(player);
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
// you can update player here [update player through props]
|
// you can update player here [update player through props]
|
||||||
const player = playerRef.current;
|
const player = playerRef.current;
|
||||||
|
console.log('playerplayerplayer===',player);
|
||||||
player.src(options.sources[0].src);
|
player.src(options.sources[0].src);
|
||||||
// player.autoplay(true);
|
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]);
|
|
||||||
|
|
||||||
// 暴露组件的方法 接受外部获取的ref
|
|
||||||
useImperativeHandle(ref, () => ({
|
|
||||||
// 构造ref的获取数据方法
|
|
||||||
currentTime: (time: number) => {
|
|
||||||
if(time){
|
|
||||||
playerRef?.current?.currentTime(time)
|
|
||||||
}
|
}
|
||||||
return playerRef?.current?.currentTime() || 0
|
}, [options, videoRef]);
|
||||||
},
|
|
||||||
}));
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div data-vjs-player>
|
<div data-vjs-player>
|
||||||
<video style={{
|
<video style={{
|
||||||
width: width || '100%',
|
width: width || '100%',
|
||||||
height:'auto'
|
height: height || 'auto'
|
||||||
}} ref={videoRef} className="video-js vjs-big-play-centered" />
|
}} ref={videoRef} className="video-js vjs-big-play-centered" />
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
// forwardRef这个组件能够将其接受的 ref 属性转发到其组件树下
|
|
||||||
export default forwardRef( VideoJS );
|
|
||||||
Loading…
Reference in new issue