Install

npm install @zym-com/video-stream

or

yarn add @zym-com/video-stream

Basic Usage

import VideoStream from "@zym-com/video-stream";
import "@zym-com/video-stream/dist/style.css";

function App() {
const options = {
    "configuration": {
        "videoFile": "",
        "seriesvideoType": "auto",
        "seriesvideoSize": {
            "x": "100%",
            "y": "90%"
        },
        "seriesobjectFit": "initial",
        "seriesVideoAutoPlay": true,
        "seriesVideoLoop": true,
        "seriesVideoControls": true,
        "seriesVideoVolume": 0,
        "frameTracking": true,
        "updateOnStart": true,
        "updateOnFocus": true,
        "reconnect": true,
        "reconnectInterval": 2000,
        "trackingDelta": 2,
        "enableStashBuffer": false,
        "autoCleanupSourceBuffer": true,
        "stashInitialSize": 128,
        "heartbeatMechanism": "",
        "heartbeatMechanismFiled": "id",
        "heartbeatMechanismTime": 30,
        "destructionMechanism": "",
        "destructionMechanismFiled": "id",
        "seriesflexDirection": "column",
        "seriesdefualtTextStyle": {
            "fontFamily": "Microsoft Yahei",
            "fontSize": 16,
            "color": "rgba(226,237,255,0.5)",
            "fontWeight": "normal",
            "letterSpacing": 1,
            "lineHeight": 0,
            "fontStyle": "normal"
        },
        "serieslabelTextAlign": "center",
        "seriesLabelVertical": "center",
        "seriestooLongDisplay": "split",
        "seriesmoreSplit": false,
        "seriesmoreSplitNum": 2,
        "seriesLabelDefaultFillStyle": "color",
        "seriesLabelDefaultColor": {
            "startVal": "rgba(15,22,34,0.6)",
            "endVal": "rgba(15,22,34,0.6)",
            "direction": 50
        },
        "seriesLabelDefaultImage": "",
        "seriesLabelDefaultImageSize": "cover",
        "seriesDefaultBorderGroup": [
            "top",
            "right",
            "bottom",
            "left"
        ],
        "seriesDefaultBorderStyle": "solid",
        "seriesDefaultBorderWidth": 1,
        "seriesDefaultBorderColor": "rgba(24, 144, 255,0)",
        "seriesDefaultBorderRadius": 0,
        "seriesVideoNoneFillStyle": "color",
        "seriesVideoNoneColor": {
            "startVal": "rgba(0,0,0,1)",
            "endVal": "rgba(0,0,0,1)",
            "direction": 50
        },
        "seriesVideoNoneImage": "",
        "seriesVideoNoneImageSize": "cover",
        "seriesVideoNoneLabel": true,
        "seriesVideoNoneLabelTextStyle": {
            "fontFamily": "Microsoft Yahei",
            "fontSize": 15,
            "color": "rgba(255,255,255,1)",
            "fontWeight": "normal",
            "letterSpacing": 0,
            "lineHeight": 0,
            "fontStyle": "normal"
        },
        "seriesVideoNoneLabelTextAlign": "center",
        "seriesVideoNoneLabelVertical": "center",
        "seriesLabelTextStyle": true,
        "seriesLabelBackground": true,
        "seriesBorderConfig": true,
        "seriesVideoNoneConfig": true,
        "seriesVideoNoneBackground": true
    },
    "base": {
        "width": 600,
        "height": 400
    },
    "dataSource": [
        {
            "label": "呼伦贝尔莫日格勒河",
            "value": "https://gcbdc.a.bdydns.com/gc/hsmbsh_1/index.m3u8?contentid=2820180516001",
            "beatId": "",
            "destoryId": "",
            "rawData": {
                "label": "呼伦贝尔莫日格勒河",
                "value": "https://gcbdc.a.bdydns.com/gc/hsmbsh_1/index.m3u8?contentid=2820180516001"
            }
        }
    ],
   bindCallbackParams:(evenName: string, data: Record<string, any>) => void;
}

 return (
    <>
      <VideoStream {...options} />
    </>
  );
}