0.0.2 • Published 4 months ago
@zym-com/video-stream-group v0.0.2
Install
npm install @zym-com/video-stream-groupor
yarn add @zym-com/video-stream-groupBasic Usage
Install
import VideoStreamGroup from "@zym-com/video-stream-group";
import "@zym-com/video-stream-group/dist/style.css";
function App() {
const options = {
"configuration": {
"layout": {
"rows": 3,
"column": 2
},
"spacing": {
"rowsSpacing": 10,
"columnSpacing": 4
},
"heartbeatMechanism": "",
"heartbeatMechanismFiled": "id",
"heartbeatMechanismTime": 30,
"destructionMechanism": "",
"destructionMechanismFiled": "id",
"scrollbarWidth": 4,
"scrollbarColor": "rgba(255,255,255,0)",
"scrollbarRadius": 10,
"scrollbarThumbColor": "rgba(76,76,76,1)",
"scrollbarThumbRadius": 10,
"seriesGlobalweightProportion": 1,
"seriesGlobalBoxSize": {
"x": "",
"y": ""
},
"seriesGlobalOffset": {
"x": 0,
"y": 0
},
"seriesGlobalDetachFromContainer": false,
"seriesGlobalLabelShow": true,
"seriesGlobalflexDirection": "column",
"seriesGlobaldefualtTextStyle": {
"fontFamily": "Microsoft Yahei",
"fontSize": 16,
"color": "rgba(226,237,255,0.5)",
"fontWeight": "normal",
"letterSpacing": 1,
"lineHeight": 0,
"fontStyle": "normal"
},
"seriesGlobalselectTextStyle": {
"fontFamily": "Microsoft Yahei",
"fontSize": 18,
"color": "rgba(255,255,255,1)",
"fontWeight": "normal",
"letterSpacing": 1,
"lineHeight": 0,
"fontStyle": "normal"
},
"seriesGloballabelTextAlign": "center",
"seriesGlobalLabelVertical": "center",
"seriesGlobaltooLongDisplay": "split",
"seriesGlobalmoreSplit": false,
"seriesGlobalmoreSplitNum": 2,
"seriesGlobalLabelBackgroundShow": true,
"seriesGlobalLabelDefaultFillStyle": "color",
"seriesGlobalLabelDefaultColor": {
"startVal": "rgba(15,22,34,0.6)",
"endVal": "rgba(15,22,34,0.6)",
"direction": 50
},
"seriesGlobalLabelDefaultImage": "",
"seriesGlobalLabelDefaultImageSize": "cover",
"seriesGlobalLabelSelectFillStyle": "color",
"seriesGlobalLabelSelectColor": {
"startVal": "rgba(15,22,34,0.6)",
"endVal": "rgba(15,22,34,0.6)",
"direction": 50
},
"seriesGlobalLabelSelectImage": "",
"seriesGlobalLabelSelectImageSize": "cover",
"seriesGlobalBorderShow": true,
"seriesGlobalDefaultBorderGroup": [
"top",
"right",
"bottom",
"left"
],
"seriesGlobalDefaultBorderStyle": "solid",
"seriesGlobalDefaultBorderWidth": 1,
"seriesGlobalDefaultBorderColor": "rgba(24, 144, 255,0)",
"seriesGlobalDefaultBorderRadius": 0,
"seriesGlobalSelectBorderGroup": [
"top",
"right",
"bottom",
"left"
],
"seriesGlobalSelectBorderStyle": "solid",
"seriesGlobalSelectBorderWidth": 1,
"seriesGlobalSelectBorderColor": "rgba(24, 144, 255,1)",
"seriesGlobalSelectBorderRadius": 0,
"seriesGlobalvideoType": "auto",
"seriesGlobalvideoSize": {
"x": "100%",
"y": "90%"
},
"seriesGlobalobjectFit": "initial",
"seriesGlobalVideoAutoPlay": true,
"seriesGlobalVideoLoop": true,
"seriesGlobalVideoControls": true,
"seriesGlobalVideoVolume": 0,
"GlobalframeTracking": true,
"GlobalupdateOnStart": true,
"GlobalupdateOnFocus": true,
"Globalreconnect": true,
"GlobalreconnectInterval": 2000,
"GlobaltrackingDelta": 2,
"GlobalenableStashBuffer": false,
"GlobalautoCleanupSourceBuffer": true,
"GlobalstashInitialSize": 128,
"seriesGlobalVideoNoneShow": true,
"seriesGlobalVideoNoneFillStyle": "color",
"seriesGlobalVideoNoneColor": {
"startVal": "rgba(0,0,0,1)",
"endVal": "rgba(0,0,0,1)",
"direction": 50
},
"seriesGlobalVideoNoneImage": "",
"seriesGlobalVideoNoneImageSize": "cover",
"seriesGlobalVideoNoneLabel": true,
"seriesGlobalVideoNoneLabelTextStyle": {
"fontFamily": "Microsoft Yahei",
"fontSize": 15,
"color": "rgba(255,255,255,1)",
"fontWeight": "normal",
"letterSpacing": 0,
"lineHeight": 0,
"fontStyle": "normal"
},
"seriesGlobalVideoNoneLabelTextAlign": "center",
"seriesGlobalVideoNoneLabelVertical": "center",
"dataSeries": [
{
"fildType": "precise",
"accurateMatching": true,
"fildValue": {
"field": "label",
"value": ""
},
"numericField": "value",
"valueRange": {
"min": "0",
"max": "100"
},
"seriesweightProportion": 1,
"seriesBoxSize": {
"x": "",
"y": ""
},
"seriesOffset": {
"x": 0,
"y": 0
},
"seriesDetachFromContainer": false,
"seriesLabelShow": true,
"seriesflexDirection": "column",
"seriesdefualtTextStyle": {
"fontFamily": "Microsoft Yahei",
"fontSize": 16,
"color": "rgba(226,237,255,0.5)",
"fontWeight": "normal",
"letterSpacing": 1,
"lineHeight": 0,
"fontStyle": "normal"
},
"seriesselectTextStyle": {
"fontFamily": "Microsoft Yahei",
"fontSize": 18,
"color": "rgba(255,255,255,1)",
"fontWeight": "normal",
"letterSpacing": 1,
"lineHeight": 0,
"fontStyle": "normal"
},
"serieslabelTextAlign": "center",
"seriesLabelVertical": "center",
"seriestooLongDisplay": "split",
"seriesmoreSplit": false,
"seriesmoreSplitNum": 2,
"seriesLabelBackgroundShow": true,
"seriesLabelDefaultFillStyle": "color",
"seriesLabelDefaultColor": {
"startVal": "rgba(15,22,34,0.6)",
"endVal": "rgba(15,22,34,0.6)",
"direction": 50
},
"seriesLabelDefaultImage": "",
"seriesLabelDefaultImageSize": "cover",
"seriesLabelSelectFillStyle": "color",
"seriesLabelSelectColor": {
"startVal": "rgba(15,22,34,0.6)",
"endVal": "rgba(15,22,34,0.6)",
"direction": 50
},
"seriesLabelSelectImage": "",
"seriesLabelSelectImageSize": "cover",
"seriesBorderShow": true,
"seriesDefaultBorderGroup": [
"top",
"right",
"bottom",
"left"
],
"seriesDefaultBorderStyle": "solid",
"seriesDefaultBorderWidth": 1,
"seriesDefaultBorderColor": "rgba(24, 144, 255,0)",
"seriesDefaultBorderRadius": 0,
"seriesSelectBorderGroup": [
"top",
"right",
"bottom",
"left"
],
"seriesSelectBorderStyle": "solid",
"seriesSelectBorderWidth": 1,
"seriesSelectBorderColor": "rgba(24, 144, 255,1)",
"seriesSelectBorderRadius": 0,
"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,
"seriesVideoNoneShow": true,
"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",
"seriesLabelDefaultBackground": true,
"seriesLabelSelectBackground": true,
"seriesDefaultBorderConfig": true,
"seriesSelectBorderConfig": true,
"seriesVideoNoneBackground": true
}
],
"scrollbarStyle": false,
"seriesGlobalLabelDefaultBackground": true,
"seriesGlobalLabelSelectBackground": true,
"seriesGlobalDefaultBorderConfig": true,
"seriesGlobalSelectBorderConfig": true,
"seriesGlobalVideoNoneBackground": true
},
"base": {
"width": 550,
"height": 460
},
"dataSource": [
{
"label": "呼伦贝尔莫日格勒河",
"value": "https://gctxyc.liveplay.myqcloud.com/gc/gly01_1_md.m3u8",
"beatId": "",
"destoryId": "",
"rawData": {
"label": "呼伦贝尔莫日格勒河",
"value": "https://gctxyc.liveplay.myqcloud.com/gc/gly01_1_md.m3u8"
}
},
{
"label": "安徽黄山",
"value": "https://gccncc.v.wscdns.com/gc/hsptgy_1/index.m3u8",
"beatId": "",
"destoryId": "",
"rawData": {
"label": "安徽黄山",
"value": "https://gccncc.v.wscdns.com/gc/hsptgy_1/index.m3u8"
}
},
{
"label": "广州塔与海心桥",
"value": "https://gcbdc.a.bdydns.com/gc/ztb_1/index.m3u8",
"beatId": "",
"destoryId": "",
"rawData": {
"label": "广州塔与海心桥",
"value": "https://gcbdc.a.bdydns.com/gc/ztb_1/index.m3u8"
}
},
{
"label": "珠江水系",
"value": "https://gccncc.v.wscdns.com/gc/wgw05_1/index.m3u8",
"beatId": "",
"destoryId": "",
"rawData": {
"label": "珠江水系",
"value": "https://gccncc.v.wscdns.com/gc/wgw05_1/index.m3u8"
}
},
{
"label": "云南迪庆独克宗古城",
"value": "https://gccncc.v.wscdns.com/gc/dhyyqyyq_1/index.m3u8?contentid=2820180516001",
"beatId": "",
"destoryId": "",
"rawData": {
"label": "云南迪庆独克宗古城",
"value": "https://gccncc.v.wscdns.com/gc/dhyyqyyq_1/index.m3u8?contentid=2820180516001"
}
},
{
"label": "海边风光",
"value": "https://hlswx.cntv.kcdnvip.com/asp/hls/850/0303000a/3/default/76cffc2263574a9f86e439d22d03d76e/850.m3u8",
"beatId": "",
"destoryId": "",
"rawData": {
"label": "海边风光",
"value": "https://hlswx.cntv.kcdnvip.com/asp/hls/850/0303000a/3/default/76cffc2263574a9f86e439d22d03d76e/850.m3u8"
}
}
],
bindCallbackParams:(evenName: string, data: Record<string, any>) => void;
}
return (
<>
<VideoStreamGroup {...options} />
</>
);
}