---
title: TsVideo - 手机自动播放组件
order: 13
path: /TsVideo
nav:
  order: 1
  title: 桌面组件
  path: /design
group:
  order: 10
  title: 其他
  path: /others
---

## TsVideo 移动端 web 视频自动播放

- 由于手机端浏览器对原生 video 的支持存在很多问题。ios 部分浏览器支持自动播放，其余浏览器因省流不支持 video 的自动播放，以及安卓对 video 层级存在置顶问题等多种不兼容问题。该组件支持将 ts 格式视频在 canvas 中渲染播放。避免了手机端的各种兼容问题。（注：pc 端可用，如只需 pc 端支持播放功能，可直接使用 video）
- 只支持 `TS 格式` 视频
- 手机端支持版本：`IOS8` 以上 和 `Android4.4`以上

### 代码演示

#### 基础使用

<code src="./demos/base.tsx" background="#fff" height="400px"/>

#### Tooltip

| 参数            | 说明                                                                                | 类型      | 默认值               |
| --------------- | ----------------------------------------------------------------------------------- | --------- | -------------------- |
| videoSrc(必填)  | 视频路径                                                                            | `string`  | --                   |
| coverImg(可选)  | 视频封面，用于低版本不兼容时展示                                                    | `string`  | --                   |
| > options(可选) | 以下为组件 options 支持配置项                                                       | `Object`  | --                   |
| loop            | 是否循环。false 在播放结束会默认回到第一帧，可在外部监听 onEnded 进行结束的图片替换 | `boolean` | true                 |
| progressive     | 是否分块加载                                                                        | `boolean` | false                |
| chunkSize       | progressive：true 时，配置分片大小，单位字节                                        | `number`  | 1024 \* 1024 （1MB） |

该组件基于 [JSMpeg Player](https://www.npmjs.com/package/@cycjimmy/jsmpeg-player) 进行的基础封装。 其他 options 的配置可参考：https://github.com/phoboslab/jsmpeg