dev-v2
parent
d35a19adbc
commit
c6959ddb3e
@ -0,0 +1,126 @@
|
||||
import React, { useEffect, useRef, useState } from 'react';
|
||||
import { Button, Slider, Select, Space, Card } from 'antd';
|
||||
import { PauseCircleOutlined, PlayCircleOutlined, ExpandOutlined } from '@ant-design/icons';
|
||||
|
||||
interface AliPlayerProps {
|
||||
vid: string;
|
||||
playAuth: string;
|
||||
width?: number | string;
|
||||
height?: number | string;
|
||||
}
|
||||
|
||||
const AliPlayer: React.FC<AliPlayerProps> = ({
|
||||
vid,
|
||||
playAuth,
|
||||
width = '100%',
|
||||
height = 500
|
||||
}) => {
|
||||
const playerRef = useRef<any>(null);
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
const [playing, setPlaying] = useState(false);
|
||||
const [currentTime, setCurrentTime] = useState(0);
|
||||
const [duration, setDuration] = useState(0);
|
||||
const [playbackRate, setPlaybackRate] = useState(1);
|
||||
|
||||
// 初始化播放器
|
||||
useEffect(() => {
|
||||
const script = document.createElement('script');
|
||||
script.src = 'https://g.alicdn.com/apsara-media-box/imp-web-player/2.25.1/aliplayer-min.js';
|
||||
script.onload = () => {
|
||||
if (containerRef.current) {
|
||||
playerRef.current = new (window as any).Aliplayer({
|
||||
id: containerRef.current,
|
||||
vid: vid,
|
||||
playauth: playAuth,
|
||||
width: width,
|
||||
height: height,
|
||||
autoplay: false,
|
||||
encryptType: 1,
|
||||
}, () => {
|
||||
// 播放器准备就绪
|
||||
setDuration(playerRef.current.getDuration());
|
||||
|
||||
// 绑定事件
|
||||
playerRef.current.on('play', () => setPlaying(true));
|
||||
playerRef.current.on('pause', () => setPlaying(false));
|
||||
playerRef.current.on('ended', () => setPlaying(false));
|
||||
playerRef.current.on('timeupdate', (currentTime: number) => {
|
||||
setCurrentTime(currentTime);
|
||||
});
|
||||
});
|
||||
}
|
||||
};
|
||||
document.head.appendChild(script);
|
||||
|
||||
return () => {
|
||||
if (playerRef.current) {
|
||||
playerRef.current.dispose();
|
||||
}
|
||||
document.head.removeChild(script);
|
||||
};
|
||||
}, [vid, playAuth]);
|
||||
|
||||
// 播放/暂停控制
|
||||
const togglePlay = () => {
|
||||
if (playing) {
|
||||
playerRef.current.pause();
|
||||
} else {
|
||||
playerRef.current.play();
|
||||
}
|
||||
};
|
||||
|
||||
// 进度条跳转
|
||||
const handleSeek = (value: number) => {
|
||||
playerRef.current.seek(value);
|
||||
};
|
||||
|
||||
// 倍速播放
|
||||
const handleSpeedChange = (value: number) => {
|
||||
playerRef.current.setPlaybackRate(value);
|
||||
setPlaybackRate(value);
|
||||
};
|
||||
|
||||
// 全屏
|
||||
const handleFullscreen = () => {
|
||||
playerRef.current.requestFullscreen();
|
||||
};
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<div ref={containerRef} style={{ width, height }} />
|
||||
|
||||
<Space style={{ marginTop: 16 }}>
|
||||
<Button
|
||||
icon={playing ? <PauseCircleOutlined /> : <PlayCircleOutlined />}
|
||||
onClick={togglePlay}
|
||||
/>
|
||||
|
||||
<Slider
|
||||
min={0}
|
||||
max={duration}
|
||||
value={currentTime}
|
||||
onChange={handleSeek}
|
||||
style={{ width: 300 }}
|
||||
/>
|
||||
|
||||
<Select
|
||||
value={playbackRate}
|
||||
onChange={handleSpeedChange}
|
||||
options={[
|
||||
{ value: 0.5, label: '0.5x' },
|
||||
{ value: 1, label: '1.0x' },
|
||||
{ value: 1.5, label: '1.5x' },
|
||||
{ value: 2, label: '2.0x' },
|
||||
]}
|
||||
/>
|
||||
|
||||
<Button
|
||||
icon={<ExpandOutlined />}
|
||||
onClick={handleFullscreen}
|
||||
/>
|
||||
</Space>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
export default AliPlayer;
|
||||
Loading…
Reference in New Issue