播放器组件

基础属性

| 属性 | 说明 | 类型 | 默认值 | | --------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | ------ | | objectFit | 视频填充 | 'fill' | 'contain ' | 'cover' | 'scale-down' | 'none ' | 'initial ' | 'inherit' | fill | | mediaDataSource | 视频属性 | | | | robustness | 容错配置 | { // 播放过程中缓冲器最小矫正的时间 默认为1000ms bufferTime: DOMHighResTimeStamp; // 多场时间探测一次 默认5000ms loopBufferTime: DOMHighResTimeStamp; // 最大断线重连次数 默认为 5 次 maxResetTimes: number; }; | | | extraParams | 额外的参数配置 | {} | any | | events | 事件订阅 | { // 视频播放开始 onLoadStart?: (playerConfig?: PlayerConfig) => void; // 点击视频重新加载 onReload?: (playerConfig?: PlayerConfig) => void; // 加载错误 onLoadError?: (playerConfig?: PlayerConfig) => void; // 流加载结束 onLoadEnd?: (playerConfig?: PlayerConfig)=> void; // 最大重试次数 onMaxReload?: (playerConfig?: PlayerConfig) => void; // 视频结束 onClose?: (playerConfig?: PlayerConfig) => void; }// 回放视频变更事件 onTimeChange?: (playerConfig?: PlayerConfig) => void; } | | | width | 视频宽度 | string ｜number | 100% | | height | 视频高度 | string ｜number | 100% |

RcFlvPlayer

flv播放器，依赖@gaopeng123/multi-player

在线demo

Usage

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {RcMultiPlayer} from "../src";
import {useEffect, useState} from "react";

const App = () => {
    const [mediaDataSource, setMediaDataSource] = useState<any>({});

    useEffect(() => {
        setTimeout(() => {
            setMediaDataSource({url: 'https://xxx/flv/xxx'})
        }, 2000);
    }, [])
    return (
        <RcMultiPlayer
            mediaDataSource={mediaDataSource}
        />
    );
};

ReactDOM.render(<App/>, document.getElementById('root'));

RcWebRTCPlayer

WebRTC 播放器在线demo

Usage

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {RcWebRTCPlayer} from "../src";
import {useEffect, useState} from "react";

const App = () => {
    const [mediaDataSource, setMediaDataSource] = useState<any>({});

    useEffect(() => {
        setTimeout(() => {
            setMediaDataSource({url: 'https://xxx/flv/xxx'})
        }, 2000);
    }, [])
    return (
        <RcWebRTCPlayer
            mediaDataSource={mediaDataSource}
        />
    );
};

ReactDOM.render(<App/>, document.getElementById('root'));

RcMultiPlayer

混合播放器，双协议在线demo

| 属性 | 说明 | 类型 | 默认值 | | ------------- | ---------------------------- | ----------------------------- | ------- | | protocol | 协议类型 | 'FLV' | 'WebRTC' | FLV | | title | 视频左上角展示内容 | string | ReactNode | null | | className | 样式 | | | | maxPlayerTime | 最大播放时长，超出后自动关闭 | "3min" | '5min' | 'forever' | forever |

Usage

import React from 'react';
import MultiPlayer from "./MultiPlayer";
import styles from '../styles.module.less';
import { LayoutPlayerProps, PlayerConfig, } from "./PlayerTyping";
import { MultiStoreEnum } from "../MultiTyping";

const LayoutPlayer: React.FC<LayoutPlayerProps> = (props) => {
    const { layoutIndex, playerConfig, selected, mediaDataSource, dispatch, events, state } = props;
    const onClose = () => {
        dispatch({
            index: layoutIndex,
            value: null
        })
    }

    const playerEvents = Object.assign({}, events, {
        onClose: (playerConfig: PlayerConfig) => {
            onClose();
            if (events?.onClose) {
                events?.onClose(Object.assign({}, playerConfig, { layoutIndex }));
            }
        },
        onReload: (playerConfig: PlayerConfig) => {
            if (events?.onReload) {
                events?.onReload(Object.assign({}, playerConfig, { layoutIndex }));
            }
        },
        onMaxReload: (playerConfig: PlayerConfig) => {
            if (events?.onMaxReload) {
                events?.onMaxReload(Object.assign({}, playerConfig, { layoutIndex }));
            }
        }
    });

    const screenConfig = state[MultiStoreEnum.screenConfig];

    const { maxPlayerTime } = screenConfig;

    return (
        <MultiPlayer
            maxPlayerTime={maxPlayerTime}
            events={playerEvents}
            mediaDataSource={mediaDataSource}
            protocol={playerConfig?.protocol}
            extraParams={playerConfig?.extraParams}
            title={playerConfig?.title}
            className={selected ? styles.selected : styles.player}
        />
    )
};

export default LayoutPlayer;

RcMultiScreenPlayer

多屏播放器在线demo

| 属性 | 说明 | 类型 | 默认值 | | --------------------- | -------------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | | className | 样式 | | | | defaultSelectedScreen | 默认分配数量 | 1 | 4 | 6 | 8 | 9 | 12 | 13 | 16; | 4 | | defaultPlayerConfig | 视频播放基础属性 | { // 协议类型 protocol?: Protocol | false | { defaultValue: Protocol, options: Array }, // 视频拉伸方式 objectFit?: ObjectFit | false | { defaultValue: ObjectFit, options: Array }; // 是否播放时长 maxPlayerTime?: MaxPlayerTime | false | { defaultValue: MaxPlayerTime, options: Array }, // 视频分辨率 resolution?: Resolution | false | { defaultValue: Resolution, options: Array } // 视频工具栏 videoToolbar?: { close?: boolean; // 是否可关闭 screenshot?: boolean; // 是否可截图 fullScreen?: boolean; // 是否支持全屏 }} | {protocol: 'FLV',maxPlayerTime: 'forever'objectFit: 'fill'resolution: '720P'} | | currentConfig | player基础属性+RcMultiPlayer属性 | | | | id | 标识 | string | multi-screen-player | | events | 事件订阅 | 基础属性events | |

Usage

import * as React from 'react';
import { Button, FormControl, InputLabel, MenuItem, Select, TextField } from "@mui/material";
import { RcMultiScreenPlayer } from "../src";
import Snackbar from "@mui/material/Snackbar";
import { useRef } from "react";

type RcMultiScreenPlayerTestProps = {};
const RcMultiScreenPlayerTest: React.FC<RcMultiScreenPlayerTestProps> = (props) => {
    const [protocol, setProtocol] = React.useState<any>('FLV');
    const [open, setOpen] = React.useState(false);
    const [currentConfig, setCurrentConfig] = React.useState<any>();
    const screenRef = useRef(null);
    const handleChange = (v: any) => {
        setProtocol(v?.target?.value);
    }
    const onClick = (e: any) => {
        // @ts-ignore
        const url = document.querySelector('#outlined-basic')?.value;
        // @ts-ignore
        const title = document.querySelector('#outlined-title')?.value;
        if (url) {
            setCurrentConfig({
                mediaDataSource: { url: url, type: 'flv', },
                playerConfig: { protocol: protocol, title: title, extraParams: { test: 1 }, layoutIndex: '0' }
            });
        } else {
            setOpen(true)
        }
    }
    return (
        <div style={{ height: 600 }}>
            <div style={{ display: 'flex' }}>
                <div style={{ flex: 1 }}>
                    <div style={{ width: '90%' }} className={'form'}>
                        <FormControl fullWidth className={'form-item'}>
                            <InputLabel id="demo-simple-select-label">协议类型</InputLabel>
                            <Select
                                labelId="demo-simple-select-label"
                                id="demo-simple-select"
                                value={protocol}
                                label="Age"
                                onChange={handleChange}
                            >
                                <MenuItem value={'FLV'}>FLV</MenuItem>
                                <MenuItem value={'WebRTC'}>WebRTC</MenuItem>
                            </Select>
                        </FormControl>
                        <FormControl fullWidth className={'form-item'}>
                            <TextField defaultValue={'title'} id="outlined-title" label="视频title"
                                       variant="outlined"/>
                        </FormControl>
                        <FormControl fullWidth className={'form-item'}>
                            <TextField defaultValue={'/live/40491879758-1-30002.flv'} id="outlined-basic" label="url地址"
                                       variant="outlined"/>
                        </FormControl>
                        <FormControl fullWidth className={'form-item'}>
                            <Button onClick={onClick} type={'submit'} id="form-submit"
                                    variant="outlined">
                                提交
                            </Button>
                        </FormControl>
                    </div>
                </div>
                <div style={{ flex: 3, height: 600 }}>
                    <RcMultiScreenPlayer
                        events={{
                            onReload: (e) => {
                                onClick(e);
                            },
                            onClose: (e) => {
                                console.log(222, e);
                            }
                        }}
                        defaultPlayerConfig={{
                            protocol: false,
                            maxPlayerTime: {
                                defaultValue: '3min',
                                options: [{
                                    label: '3分钟',
                                    value: '3min'
                                }]
                            },
                            objectFit: 'cover'
                        }}
                        ref={screenRef}
                        currentConfig={currentConfig}
                        defaultSelectedScreen={4}/>
                </div>
            </div>
            <Snackbar
                anchorOrigin={{ vertical: 'top', horizontal: 'left' }}
                open={open}
                autoHideDuration={6000}
                onClose={() => setOpen(false)}
                message="请输入播放地址"
            />
        </div>
    )
};

export default RcMultiScreenPlayerTest;