forked from p96170835/amis
Video 切换地址逻辑优化
This commit is contained in:
parent
9768473bc2
commit
2877efda86
|
@ -50,6 +50,10 @@ export interface FlvSourceProps {
|
|||
|
||||
export class FlvSource extends React.Component<FlvSourceProps, any> {
|
||||
flvPlayer: any;
|
||||
loaded = false;
|
||||
timer: any;
|
||||
unsubscribe: any;
|
||||
|
||||
componentDidMount() {
|
||||
let {
|
||||
src,
|
||||
|
@ -62,8 +66,68 @@ export class FlvSource extends React.Component<FlvSourceProps, any> {
|
|||
setError
|
||||
} = this.props;
|
||||
|
||||
this.initFlv({
|
||||
video,
|
||||
manager,
|
||||
src,
|
||||
isLive,
|
||||
config,
|
||||
actions,
|
||||
setError,
|
||||
autoPlay
|
||||
});
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps: FlvSourceProps) {
|
||||
const props = this.props;
|
||||
let {
|
||||
autoPlay,
|
||||
actions,
|
||||
src,
|
||||
setError,
|
||||
isLive,
|
||||
config,
|
||||
video,
|
||||
manager
|
||||
} = props;
|
||||
|
||||
if (src !== prevProps.src) {
|
||||
setError('');
|
||||
this.flvPlayer?.destroy();
|
||||
this.unsubscribe?.();
|
||||
this.loaded = false;
|
||||
this.initFlv({
|
||||
video,
|
||||
manager,
|
||||
src,
|
||||
isLive,
|
||||
config,
|
||||
actions,
|
||||
setError,
|
||||
autoPlay
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
if (this.flvPlayer) {
|
||||
this.flvPlayer.unload();
|
||||
this.flvPlayer.detachMediaElement();
|
||||
this.props.setError?.('');
|
||||
}
|
||||
}
|
||||
|
||||
initFlv({
|
||||
video,
|
||||
manager,
|
||||
src,
|
||||
isLive,
|
||||
config,
|
||||
actions,
|
||||
setError,
|
||||
autoPlay
|
||||
}: any) {
|
||||
(require as any)(['flv.js'], (flvjs: any) => {
|
||||
if (flvjs.isSupported()) {
|
||||
video = video || (manager.video && manager.video.video);
|
||||
|
||||
let flvPlayer = flvjs.createPlayer(
|
||||
|
@ -76,16 +140,15 @@ export class FlvSource extends React.Component<FlvSourceProps, any> {
|
|||
);
|
||||
flvPlayer.attachMediaElement(video);
|
||||
this.flvPlayer = flvPlayer;
|
||||
let loaded = false;
|
||||
let timer: any;
|
||||
|
||||
manager.subscribeToOperationStateChange((operation: any) => {
|
||||
this.unsubscribe = manager.subscribeToOperationStateChange(
|
||||
(operation: any) => {
|
||||
const type = operation.operation.action;
|
||||
|
||||
if (type === 'play') {
|
||||
clearTimeout(timer);
|
||||
if (!loaded) {
|
||||
loaded = true;
|
||||
clearTimeout(this.timer);
|
||||
if (!this.loaded) {
|
||||
this.loaded = true;
|
||||
flvPlayer.load();
|
||||
}
|
||||
|
||||
|
@ -94,37 +157,30 @@ export class FlvSource extends React.Component<FlvSourceProps, any> {
|
|||
flvPlayer.pause();
|
||||
|
||||
if (isLive) {
|
||||
timer = setTimeout(() => {
|
||||
this.timer = setTimeout(() => {
|
||||
actions.seek(0);
|
||||
flvPlayer.unload();
|
||||
loaded = false;
|
||||
this.loaded = false;
|
||||
}, 30000);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
);
|
||||
|
||||
flvPlayer.on(flvjs.Events.RECOVERED_EARLY_EOF, () => {
|
||||
setError('直播已经结束');
|
||||
});
|
||||
flvPlayer.on(flvjs.Events.ERROR, () => {
|
||||
setError('视频加载失败');
|
||||
flvPlayer.unload();
|
||||
});
|
||||
|
||||
if (autoPlay) {
|
||||
setTimeout(() => actions.play(), 200);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
if (this.flvPlayer) {
|
||||
this.flvPlayer.unload();
|
||||
this.flvPlayer.detachMediaElement();
|
||||
this.props.setError?.('');
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<source src={this.props.src} type={this.props.type || 'video/x-flv'} />
|
||||
|
|
Loading…
Reference in New Issue