Use aliplayer-react to encapsulate playback components in React

What I want to talk about here is how to encapsulate the playback component with aliplayer-react

//首先安装依赖
npm i aliplayer-react

如果安装失败,可以在项目的package.json文件手动添加 "aliplayer-react": "^0.7.0",再重新安装依赖

This is the git repository of aliplayer-react , which contains useful examples.

Below is the component I encapsulated

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>
  );
});