# MnVideoPlayer API 文档

## 概述

MnVideoPlayer 是一个基于 WebSocket 的视频播放器，支持实时播放、历史回放、对讲等功能。

在项目中使用时，需要排除 `mn-video-player` 模块的预加载，以避免与 Worker文件资源获取失败。

```javascript
// 示例：Vue 项目配置
module.exports = {
  // ... 其他配置
  optimizeDeps: {
    exclude: ['mn-video-player']
  },
};
```

## 初始化

### init(options)

初始化播放器实例。

**参数：**

| 参数 | 类型 | 必填 | 说明 |
|------|------|--------|------|
| el | HTMLElement | 是 | 容器元素，用于显示视频 |
| host | string | 是 | 主机地址 |
| port | number | 是 | 端口号 |
| ws | string | 是 | WebSocket 协议（ws 或 wss） |
| userId | string | 是 | 用户 ID |
| tenantId | string | 是 | 租户 ID |
| accessToken | string | 是 | 访问令牌 |
| phone | string | 否 | 电话号码 |
| channelNo | number | 否 | 通道号 |
| beginTime | string | 否 | 开始时间（历史回放时使用） |

**示例：**

```javascript
const player = new MnVideoPlayer();
player.init({
    el: document.getElementById('player'),
    host: '172.16.0.150',
    port: 16202,
    ws: 'ws',
    userId: '1',
    tenantId: '1',
    accessToken: 'your-access-token',
    phone: '13695962147',
    channelNo: 5,
    beginTime: '2026-01-14 13:30:00'
    onlyWasm:true // 仅使用wasm解码
});
```

## 播放控制

### play(data)

开始播放视频。

**参数：**

| 参数 | 类型 | 必填 | 说明 |
|------|------|--------|------|
| phone | string | 否 | 电话号码 |
| channelNo | number | 否 | 通道号 |
| beginTime | string | 否 | 开始时间（历史回放时使用） |
| onlyWasm | boolean | 否 | 仅使用wasm解码|
**示例：**

```javascript
// 实时播放
player.play({
    phone: '13695962147',
    channelNo: 5
});

// 历史回放
player.play({
    phone: '13695962147',
    channelNo: 5,
    beginTime: '2026-01-14 13:30:00'
});
```

### pause()

暂停播放。

**参数：** 无

**示例：**

```javascript
player.pause();
```

### resume()

恢复播放。

**参数：** 无

**说明：** 用于在暂停后恢复视频播放。

**示例：**

```javascript
// 恢复播放
player.resume();
```

### stop()

停止播放。

**参数：** 无

**示例：**

```javascript
player.stop();
```

### switchStream(streamType)

切换码流类型。

**参数：**

| 参数 | 类型 | 必填 | 说明 |
|------|------|--------|------|
| streamType | number | 是 | 码流类型（0=主码流，1=子码流） |

**示例：**

```javascript
// 切换到主码流
player.switchStream(0);

// 切换到子码流
player.switchStream(1);

// 切换码流（使用变量）
let streamType = 1;
player.switchStream(streamType);
streamType = streamType === 1 ? 0 : 1;
```

### enableAudio(enable)

开启或关闭音频。

**参数：**

| 参数 | 类型 | 必填 | 说明 |
|------|------|--------|------|
| enable | boolean | 是 | true=开启音频，false=关闭音频 |

**示例：**

```javascript
// 开启音频
player.enableAudio(true);

// 关闭音频
player.enableAudio(false);

// 切换音频状态（使用变量）
let audioEnabled = false;
player.enableAudio(!audioEnabled);
audioEnabled = !audioEnabled;
```

### resetCanvas()

重置画布大小，使其适应容器元素的当前尺寸。

**参数：** 无

**说明：** 当容器元素大小改变时，调用此方法可以重新调整画布大小，确保视频显示正常。

**示例：**

```javascript
// 重置画布大小
player.resetCanvas();

// 窗口大小改变时重置画布
window.addEventListener('resize', () => {
    player.resetCanvas();
});
```

### timeCallBack(callback)

设置视频时间回调函数。

**参数：**

| 参数 | 类型 | 必填 | 说明 |
|------|------|--------|------|
| callback | function | 是 | 时间回调函数，参数为视频时间（毫秒） |

**示例：**

```javascript
player.timeCallBack((time) => {
    console.log('当前视频时间:', time);
});
```



## 完整示例

### 实时播放示例

```javascript
import MnVideoPlayer from './dist/mn-video-player.es.js'

const player = new MnVideoPlayer();

// 初始化播放器
player.init({
    el: document.getElementById('player'),
    host: '172.16.0.150',
    port: 16202,
    ws: 'ws',
    userId: '1',
    tenantId: '1',
    accessToken: 'your-access-token',
    phone: '13695962147',
    channelNo: 5
});

// 开始播放
player.play({
    phone: '13695962147',
    channelNo: 5
});
```

### 历史回放示例

```javascript
import MnVideoPlayer from './dist/mn-video-player.es.js'

const player = new MnVideoPlayer();

// 初始化播放器
player.init({
    el: document.getElementById('player'),
    host: '172.16.0.150',
    port: 16202,
    ws: 'ws',
    userId: '1',
    tenantId: '1',
    accessToken: 'your-access-token',
    phone: '13695962147',
    channelNo: 5
});

// 历史回放
player.play({
    phone: '13695962147',
    channelNo: 5,
    beginTime: '2026-01-14 13:30:00'
});
```

### 完整控制示例

```javascript
import MnVideoPlayer from './dist/mn-video-player.es.js'

const player = new MnVideoPlayer();

// 初始化播放器
player.init({
    el: document.getElementById('player'),
    host: '172.16.0.150',
    port: 16202,
    ws: 'ws',
    userId: '1',
    tenantId: '1',
    accessToken: 'your-access-token',
    phone: '13695962147',
    channelNo: 5
});

// 播放按钮
document.getElementById('playBtn').addEventListener('click', () => {
    player.play({
        phone: '13695962147',
        channelNo: 5,
        beginTime: '2026-01-14 13:30:00'
    });
});

// 暂停按钮
document.getElementById('pauseBtn').addEventListener('click', () => {
    player.pause();
});

// 停止按钮
document.getElementById('stopBtn').addEventListener('click', () => {
    player.stop();
});

// 切换码流按钮
let streamType = 1;
document.getElementById('switchBtn').addEventListener('click', () => {
    player.switchStream(streamType);
    streamType = streamType === 1 ? 0 : 1
});

// 音频开关按钮
let audioEnabled = false;
document.getElementById('playAudioBtn').addEventListener('click', () => {
    player.enableAudio(!audioEnabled);
    audioEnabled = !audioEnabled
});

```

## 注意事项

1. **容器元素**：初始化时必须提供一个有效的 DOM 元素作为容器
2. **WebSocket 连接**：确保 WebSocket 服务器地址可访问
4. **码流切换**：实时播放和历史回放都支持码流切换
5. **时间格式**：历史回放的 beginTime 格式为 'YYYY-MM-DD HH:mm:ss'
7. **资源清理**：停止播放时会自动清理资源


## 浏览器兼容性

- Chrome 90+
- Firefox 88+
- Safari 14+
- Edge 90+

需要支持：
- WebSocket API
- Canvas API
- Web Audio API
- WebAssembly (WASM)
