React中用aliplayer-react封装播放组件
首先,网上有很多相关的文档如何直接使用aliplayer,参照 aliiplayer播放器官方文档;react项目中当然也可以这样引用,这里就不赘述了,网上有很多怎么这样用的文档.
这里要讲的是如何aliplayer-react封装播放组件
//首先安装依赖
npm i aliplayer-react
如果安装失败,可以在项目的package.json文件手动添加 "aliplayer-react": "^0.7.0",再重新安装依赖
这是aliplayer-react的git仓库,里面有用例
下面是我封装的组件
import React, {
memo, useEffect, useState } from "react";
import Player from "aliplayer-react";
import apis from "../../services/apis";
import {
post } from "../../services/request";
import styled from "styled-components";
const PlayerWrapper = styled.div`
.prism-player {
background-color: #333;
z-index: 0;
margin-bottom: 1.6rem;
}
.prism-player .prism-big-play-btn {
left: calc(50% - 32px);
bottom: calc(50% - 32px);
}
.prism-player .prism-controlbar {
display: block !important;
}
.prism-player .prism-liveshift-progress .prism-progress-played,
.prism-player .prism-progress .prism-progress-played {
background-color: #e34d59 !important;
}
#playerno.playerwh {
width: ${
props=>props.width};
height: ${
props=>props.height};
background-color: #333;
color: #fff !important;
.right-title-btn {
position: relative;
margin-right:10px;
width: 20px;
height: 20px;
box-sizing: border-box;
}
.right-title-btn:before {
position: absolute;
content: "";
width: 2px;
height: 25px;
background: #e34d59;
transform: rotate(45deg);
left: 11px;
}
.right-title-btn:after {
content: "";
position: absolute;
width: 2px;
height: 25px;
background: #e34d59;
transform: rotate(-45deg);
left: 11px;
}
}
`;
export default memo(function PlayerHandle(props) {
const {
data} = props;
const {
vid, direction, coverUrl, id } = data;
const [instance, setInstance] = useState(null);
const [playauth, setPlayauth] = useState("");
const [CoverURL, setCoverURL] = useState("");
const [flag, setFlag] = useState(true);
useEffect(() => {
getVideoPath();
}, []);
// 获取视频播放路径
const getVideoPath = async () => {
const {
error, data } = await post(apis.newVod, {
vid });
const {
msg, status, data: videoinfo } = data;
if (!!error) return;
if (status == 1) {
setPlayauth(videoinfo.PlayAuth);
setCoverURL(videoinfo.VideoMeta.CoverURL);
setDuration && setDuration(videoinfo.VideoMeta.Duration);
} else {
setFlag(false);
}
};
// direction->2是竖屏:宽高比6.13:9.6;横屏16:9
const width=direction == 2 ? "307px" :"862px"
const height=direction == 2? "480px" :"485px"
//config的相关配置(https://help.aliyun.com/document_detail/125572.html?spm=a2c4g.11186623.6.1174.5c2f148abYVozf),根据业务需求自行配置
const config = {
width,
height,
vid,
playauth,
cover: coverUrl ? coverUrl : CoverURL,
autoplay: true,
components: [ //调速设置
{
name: "RateComponent",
type: Player.components.RateComponent,
},
],
skinLayout: [
{
name: "bigPlayButton",
align: "blabs",
x: "calc(50% - 32px)",
y: "calc(50% - 32px)",
},
{
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: "progress", align: "blabs", x: 0, y: 44 },
{
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:"subtitle", align:"tr",x:15, y:12},
// {name:"setting", align:"tr",x:15, y:12},
{
name: "volume", align: "tr", x: 5, y: 10 },
],
},
],
// encryptType:1, //当播放私有加密流时需要设置。
};
return (
<PlayerWrapper width={
width} height={
height}>
{
flag ? (
<Player
config={
config}
onGetInstance={
(instance) => {
instance.on("play", () => {
console.log("开始播放");
})
instance.on("pause", () => {
console.log("暂停了");
})
setInstance(instance);
}}
/>
) : (
<div id="playerno" className="playerwh flex-center">
<span className="right-title-btn"></span>视频播放错误
</div>
)}
</PlayerWrapper>
);
});