|
|
|
|
@ -1,6 +1,7 @@
|
|
|
|
|
import React, { useEffect, useRef, useState } from 'react';
|
|
|
|
|
import { Button, Slider, Select, Space, Card } from 'antd';
|
|
|
|
|
import { PauseCircleOutlined, PlayCircleOutlined, ExpandOutlined } from '@ant-design/icons';
|
|
|
|
|
import React, { useEffect, useState } from 'react';
|
|
|
|
|
import { Card } from 'antd';
|
|
|
|
|
import Aliplayer from 'aliyun-aliplayer';
|
|
|
|
|
import 'aliyun-aliplayer/build/skins/default/aliplayer-min.css';
|
|
|
|
|
|
|
|
|
|
interface AliPlayerProps {
|
|
|
|
|
vid: string;
|
|
|
|
|
@ -15,115 +16,31 @@ const AliPlayer: React.FC<AliPlayerProps> = ({
|
|
|
|
|
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);
|
|
|
|
|
const [player, setPlayer] = useState<typeof Aliplayer>(null); // 播放器实例
|
|
|
|
|
|
|
|
|
|
// 初始化播放器
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
const link = document.createElement('link');
|
|
|
|
|
const script = document.createElement('script');
|
|
|
|
|
link.rel = "stylesheet"
|
|
|
|
|
link.href = 'https://g.alicdn.com/apsara-media-box/imp-web-player/2.29.1/skins/default/aliplayer-min.css'
|
|
|
|
|
script.src = 'https://g.alicdn.com/apsara-media-box/imp-web-player/2.29.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);
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
if (player) {
|
|
|
|
|
player.dispose();
|
|
|
|
|
}
|
|
|
|
|
// 更多使用方法请参考接入文档：https://help.aliyun.com/zh/vod/developer-reference/integration
|
|
|
|
|
const playerInstance = new Aliplayer(
|
|
|
|
|
{
|
|
|
|
|
id: "container",
|
|
|
|
|
width: width,
|
|
|
|
|
height: height,
|
|
|
|
|
vid,
|
|
|
|
|
playauth: playAuth,
|
|
|
|
|
disableSeek: true,
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
document.head.appendChild(link);
|
|
|
|
|
document.head.appendChild(script);
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
return () => {
|
|
|
|
|
if (playerRef.current) {
|
|
|
|
|
playerRef.current.dispose();
|
|
|
|
|
}
|
|
|
|
|
document.head.removeChild(link);
|
|
|
|
|
document.head.removeChild(script);
|
|
|
|
|
};
|
|
|
|
|
setPlayer(playerInstance);
|
|
|
|
|
}, [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>
|
|
|
|
|
<div id="container" style={{ width, height }} />
|
|
|
|
|
</Card>
|
|
|
|
|
);
|
|
|
|
|
};
|
|
|
|
|
|
