使用reloaduserPlayInfoAndVidRequestMts提示accessSecret is not defined #288
Open
Description
代码如下
const _oriVideoOptions = {
width: '100%',
height: '100%',
autoplay: false, //自动播放
encryptType: 1,
preload: false, //自动加载
useH5Prism: true,
playsinline: true,
rePlay: false,
isLive: false,
};
export const AliPlayer = forwardRef((props, ref) => {
const playerRef = useRef();
const { className, style = {} } = props;
const playerIdRef = useRef(`player-${Date.now()}`);
const [playerStatus, setPlayerStatus] = useState('unInit');
const lastQuoteId = $lus.usePrevious(props.id);
const initPlay = async () => {
if (playerStatus === 'unInit') {
const res = await _getVideoInfo(props.id);
if (res?.success) {
const { play_auth, video_id, status } = res.data || {};
if (play_auth && video_id && status === 'Normal') {
setPlayerStatus('end');
const options = {
..._oriVideoOptions,
id: playerIdRef.current,
vid: video_id,
playauth: play_auth,
};
if (props.cover) {
options.cover = props.cover;
}
console.log('options==', options);
if (window.Aliplayer) {
if (playerRef.current) {
console.log('开始重置视频')
playerRef.current.reloaduserPlayInfoAndVidRequestMts(
props.id,
play_auth,
);
} else {
playerRef.current = new Aliplayer(options);
}
console.log('playerRef', playerRef);
} else {
console.warn('缺少Aliplayer相关依赖');
}
} else {
setPlayerStatus('transcoding');
delay(() => initPlay(), 5000);
}
}
}
};
const disposePlayer = ()=>{
if(playerRef.current){
playerRef.current.dispose()
}
}
useEffect(() => {
if (props.id) {
console.log('初始化播放', props.id);
console.log('上次的quoteId', lastQuoteId);
if (lastQuoteId && lastQuoteId !== props.id) {
console.log('quoteId发生变化，需要重置');
// disposePlayer()
setPlayerStatus('unInit');
}
initPlay(props.id);
}
}, [props.id, playerStatus]);
useEffect(() => {
return function cleanUp() {
console.log('播放器即将卸载');
};
}, []);
return (
<div
id={playerIdRef.current}
className={`${className} ali-player prism-player`}
style={style}
ref={ref}
>
{/* {playerStatus === 'unInit' && <div className="trans">加载中...</div>} */}
{playerStatus === 'transcoding' && <div className="trans">转码中...</div>}
</div>
);
});
Metadata
Assignees
Labels
No labels