---
order: 4
group:
  title: 媒体
  order: 30
---

## 可配置视频组件

可以改变宽、高、视频链接，可以播放 mp4 视频和直播视频流

Demo:

单个

```tsx
import React from 'react';
import * as Charts from 'edata-charts';
const props = {
  data: [
    {
      title: '香樟园摄像头',
      url:
        'https://ruxin-dev.gtdreamlife.com/mag/hls/69cbf20f0d8e4d2dba5856d4c3ca8d9a/1/live.m3u8',
    },
  ],
};
export default () => <Charts.SCSingleVideo {...props} />;
```

多个

```tsx
import React from 'react';
import * as Charts from 'edata-charts';
const props = {
  data: [
    {
      title: '香樟园摄像头',
      url:
        'https://ruxin-dev.gtdreamlife.com/mag/hls/69cbf20f0d8e4d2dba5856d4c3ca8d9a/1/live.m3u8',
    },
    {
      title: '香樟园摄像头1',
      url:
        'https://ruxin-dev.gtdreamlife.com/mag/hls/69cbf20f0d8e4d2dba5856d4c3ca8d9a/1/live.m3u4',
    },
    {
      title: '香樟园摄像头2',
      url:
        'https://ruxin-dev.gtdreamlife.com/mag/hls/69cbf20f0d8e4d2dba5856d4c3ca8d9a/1/live.m3u6',
    },
  ],
};
export default () => <Charts.SCSingleVideo {...props} />;
```

## API

| 参数 | 说明       | 类型   |
| ---- | ---------- | ------ |
| size | 容器的宽高 | object |
| url  | 视频链接   | string |