MnVideoPlayer API 文档

概述

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

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

// 示例：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 | 否 | 开始时间（历史回放时使用） |

示例：

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解码| 示例：

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

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

pause()

暂停播放。

参数： 无

示例：

player.pause();

resume()

恢复播放。

参数： 无

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

示例：

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

stop()

停止播放。

参数： 无

示例：

player.stop();

switchStream(streamType)

切换码流类型。

参数：

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

示例：

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

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

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

enableAudio(enable)

开启或关闭音频。

参数：

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

示例：

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

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

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

resetCanvas()

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

参数： 无

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

示例：

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

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

timeCallBack(callback)

设置视频时间回调函数。

参数：

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

示例：

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

完整示例

实时播放示例

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
});

历史回放示例

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'
});

完整控制示例

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 服务器地址可访问
3. 码流切换：实时播放和历史回放都支持码流切换
4. 时间格式：历史回放的 beginTime 格式为 'YYYY-MM-DD HH:mm:ss'
5. 资源清理：停止播放时会自动清理资源

浏览器兼容性

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

需要支持：

• WebSocket API
• Canvas API
• Web Audio API
• WebAssembly (WASM)