160 lines
3.9 KiB
JavaScript
160 lines
3.9 KiB
JavaScript
import { useDocumentVisibility } from "ahooks";
|
|
import { uniqueId } from "lodash-es";
|
|
import { forwardRef, useEffect, useImperativeHandle, useRef } from "react";
|
|
import { dynamicLoadCss, dynamicLoadJs } from "../../utils";
|
|
|
|
/**
|
|
* 视频播放组件
|
|
*/
|
|
const AliPlayer = forwardRef(({
|
|
source = "",
|
|
vid = "",
|
|
playAuth = "",
|
|
cover = "",
|
|
width = "100%",
|
|
height = "600px",
|
|
autoplay = true,
|
|
showProgress = true,
|
|
isLive = false,
|
|
playTime = 0,
|
|
onEnded,
|
|
onTimeupdate,
|
|
}, ref) => {
|
|
const playerRef = useRef(null);
|
|
const containerRef = useRef(null);
|
|
const visibility = useDocumentVisibility();
|
|
const className = useRef(uniqueId("_")).current;
|
|
|
|
useImperativeHandle(ref, () => ({
|
|
play: () => {
|
|
playerRef.current && playerRef.current.play();
|
|
},
|
|
pause: () => {
|
|
playerRef.current && playerRef.current.pause();
|
|
},
|
|
}));
|
|
|
|
const onDisposeAliPlayer = () => {
|
|
if (!playerRef.current)
|
|
return;
|
|
playerRef.current.dispose();
|
|
playerRef.current = null;
|
|
};
|
|
|
|
const onCreateAliPlayer = async () => {
|
|
if (!containerRef.current)
|
|
return;
|
|
await dynamicLoadJs("https://g.alicdn.com/apsara-media-box/imp-web-player/2.16.3/aliplayer-min.js");
|
|
await dynamicLoadCss("https://g.alicdn.com/apsara-media-box/imp-web-player/2.16.3/skins/default/aliplayer-min.css");
|
|
onDisposeAliPlayer();
|
|
|
|
const skinLayout = [
|
|
{ name: "bigPlayButton", align: "blabs", x: 30, y: 80 },
|
|
{ name: "H5Loading", align: "cc" },
|
|
{ name: "errorDisplay", align: "tlabs", x: 0, y: 0 },
|
|
{ name: "infoDisplay" },
|
|
{ name: "tooltip", align: "blabs", x: 0, y: 56 },
|
|
{ name: "thumbnail" },
|
|
{
|
|
name: "controlBar",
|
|
align: "blabs",
|
|
x: 0,
|
|
y: 0,
|
|
children: [
|
|
{ name: "playButton", align: "tl", x: 15, y: 12 },
|
|
{ name: "timeDisplay", align: "tl", x: 10, y: 7 },
|
|
{ name: "fullScreenButton", align: "tr", x: 10, y: 12 },
|
|
{ name: "setting", align: "tr", x: 15, y: 12 },
|
|
{ name: "volume", align: "tr", x: 5, y: 10 },
|
|
],
|
|
},
|
|
];
|
|
|
|
if (showProgress) {
|
|
skinLayout[skinLayout.length - 1].children.unshift({
|
|
name: "progress",
|
|
align: "blabs",
|
|
x: 0,
|
|
y: 44,
|
|
});
|
|
}
|
|
|
|
if (typeof window.Aliplayer !== "undefined") {
|
|
playerRef.current = new window.Aliplayer(
|
|
{
|
|
id: className,
|
|
...(source
|
|
? { source }
|
|
: {
|
|
vid,
|
|
playauth: playAuth,
|
|
qualitySort: "asc",
|
|
format: "m3u8",
|
|
encryptType: 1,
|
|
mediaType: "video",
|
|
isLive: true,
|
|
rePlay: false,
|
|
playsinline: true,
|
|
controlBarVisibility: "hover",
|
|
}),
|
|
cover,
|
|
width,
|
|
height,
|
|
autoplay,
|
|
isLive,
|
|
useH5Prism: true,
|
|
skinLayout,
|
|
},
|
|
(player) => {
|
|
if (autoplay) {
|
|
player.play();
|
|
}
|
|
|
|
player.on("ended", () => {
|
|
onEnded && onEnded();
|
|
});
|
|
|
|
player.on("timeupdate", () => {
|
|
onTimeupdate && onTimeupdate(player.getCurrentTime());
|
|
});
|
|
|
|
if (playTime > 0) {
|
|
player.seek(playTime);
|
|
}
|
|
},
|
|
);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (source || (vid && playAuth)) {
|
|
onCreateAliPlayer();
|
|
}
|
|
|
|
return () => {
|
|
onDisposeAliPlayer();
|
|
};
|
|
}, [source, vid, playAuth]);
|
|
|
|
useEffect(() => {
|
|
if (visibility === "hidden") {
|
|
playerRef.current && playerRef.current.pause();
|
|
}
|
|
else {
|
|
playerRef.current && playerRef.current.play();
|
|
}
|
|
}, [visibility]);
|
|
|
|
return (
|
|
<div
|
|
ref={containerRef}
|
|
id={className}
|
|
style={{ width, height }}
|
|
/>
|
|
);
|
|
});
|
|
|
|
AliPlayer.displayName = "AliPlayer";
|
|
|
|
export default AliPlayer;
|