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