test/amis2
1
0
Fork 0
mirror of https://gitee.com/baidu/amis.git synced 2024-11-30 02:58:05 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

Video 切换地址逻辑优化

Browse Source
This commit is contained in:
2betop 2020-08-21 12:07:43 +08:00
parent 22b6730d94
commit bec9aafd38
1 changed files with 108 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

160
src/renderers/Video.tsx
View File

@ -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,61 +66,49 @@ export class FlvSource extends React.Component<FlvSourceProps, any> {
setError
} = this.props;
(require as any)(['flv.js'], (flvjs: any) => {
if (flvjs.isSupported()) {
video = video || (manager.video && manager.video.video);
let flvPlayer = flvjs.createPlayer(
{
type: 'flv',
url: src,
isLive: isLive
},
config
);
flvPlayer.attachMediaElement(video);
this.flvPlayer = flvPlayer;
let loaded = false;
let timer: any;
manager.subscribeToOperationStateChange((operation: any) => {
const type = operation.operation.action;
if (type === 'play') {
clearTimeout(timer);
if (!loaded) {
loaded = true;
flvPlayer.load();
}
flvPlayer.play();
} else if (type === 'pause') {
flvPlayer.pause();
if (isLive) {
timer = setTimeout(() => {
actions.seek(0);
flvPlayer.unload();
loaded = false;
}, 30000);
}
}
});
flvPlayer.on(flvjs.Events.RECOVERED_EARLY_EOF, () => {
setError('直播已经结束');
});
flvPlayer.on(flvjs.Events.ERROR, () => {
setError('视频加载失败');
});
if (autoPlay) {
setTimeout(() => actions.play(), 200);
}
}
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();
@ -125,6 +117,70 @@ export class FlvSource extends React.Component<FlvSourceProps, any> {
}
}
initFlv({
video,
manager,
src,
isLive,
config,
actions,
setError,
autoPlay
}: any) {
(require as any)(['flv.js'], (flvjs: any) => {
video = video || (manager.video && manager.video.video);
let flvPlayer = flvjs.createPlayer(
{
type: 'flv',
url: src,
isLive: isLive
},
config
);
flvPlayer.attachMediaElement(video);
this.flvPlayer = flvPlayer;
this.unsubscribe = manager.subscribeToOperationStateChange(
(operation: any) => {
const type = operation.operation.action;
if (type === 'play') {
clearTimeout(this.timer);
if (!this.loaded) {
this.loaded = true;
flvPlayer.load();
}
flvPlayer.play();
} else if (type === 'pause') {
flvPlayer.pause();
if (isLive) {
this.timer = setTimeout(() => {
actions.seek(0);
flvPlayer.unload();
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);
}
});
}
render() {
return (
<source src={this.props.src} type={this.props.type || 'video/x-flv'} />