From c6959ddb3e4744b8a6b6366f8825cb88e89c5a66 Mon Sep 17 00:00:00 2001 From: Joe Date: Thu, 20 Feb 2025 00:06:53 +0800 Subject: [PATCH] up --- package.json | 1 + src/components/AliPlayer/index.tsx | 126 ++++++++++++++++++++++++++ src/pages/TrainingClasses/detail.tsx | 127 +++++++++++++++++++++++---- 3 files changed, 238 insertions(+), 16 deletions(-) create mode 100644 src/components/AliPlayer/index.tsx diff --git a/package.json b/package.json index 0b5400b..d463192 100644 --- a/package.json +++ b/package.json @@ -54,6 +54,7 @@ "@dnd-kit/sortable": "^8.0.0", "@dnd-kit/utilities": "^3.2.2", "@umijs/route-utils": "^2.2.2", + "aliyun-aliplayer": "^2.29.1", "antd": "^5.2.2", "antd-img-crop": "^4.23.0", "braft-editor": "^2.3.9", diff --git a/src/components/AliPlayer/index.tsx b/src/components/AliPlayer/index.tsx new file mode 100644 index 0000000..fbd0692 --- /dev/null +++ b/src/components/AliPlayer/index.tsx @@ -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 = ({ + vid, + playAuth, + width = '100%', + height = 500 +}) => { + const playerRef = useRef(null); + const containerRef = useRef(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 ( + +
+ + +