vue-multi-split-player

一款垃圾自适应多分屏播放器，支持主流直播、点播。

https://zhangyongwnag.github.io/vue-multi-split-player/example/dist/index.html

Features

• • 基础多分屏播放，最高5分屏
• • 支持直播websocket、webrtc、m3u8、flv，点播m3u8、mp4
• • 支持自定义弹幕
• • 支持OCR
• • 单机局部放大，双击全屏
• • 支持添加自定义水印，并且防篡改
• • 提供多分屏、画中画和电影模式。
• • 支持多清晰度切换
• • 支持自定义通道选择，自定义声音
• • 兼容浏览器播放声音策略(媒体参与度)
• • 支持mark点

Installation

# Using pnpm
pnpm install vue-multi-split-player -S

# Using yarn
yarn add vue-multi-split-player

# Using npm
npm install vue-multi-split-player --save

Usage

Global Registration

// main.js
import Vue from 'vue';
import * as VueMultiSplitPlayer from "vue-multi-split-player";
import 'vue-multi-split-player/dist/style.css'; // Import styles

Vue.use(VueMultiSplitPlayer);

Local Registration for Vue2.7

// In your component
import { VueMultiSplitPlayer } from 'vue-multi-split-player';
import 'vue-multi-split-player/dist/style.css'; // Import styles

// for vue2.6-
export default {
  components: {
    VueMultiSplitPlayer
  }
  // ...
}

Component Usage

<template>
  <div class="container">
    <VueMultiSplitPlayer
      mode="vod"
      :playStreams="playStreams"
      :noteList="[]"
      :muted="false"
      :autoplay="true"
      classroomType="" 
      :isEnableDanmu="false"
      :isEnableControl="false"
      :isEnableOcr="false"
      :isEnableToolbar="true"
      :isEnableWaterMarker="false"
      :width="1920"
      :height="1080"
    />
  </div>
</template>

<script setup>
import { reactive } from "vue"

let playStreams = reactive({
  '高清': {
    source: [
      {
        url: 'http://example.com/path/to/high-quality.mp4',
        name: '高清版本'
      }
    ]
  },
  '标清': {
    source: [
      {
        url: 'http://example.com/path/to/standard-quality.mp4',
        name: '标清版本'
      }
    ]
  },
})
</script>

Props

Prop	Type	Default	Description
mode	String	'live'	播放类型: live：直播，vod：点播，websocket or webrtc
playStreams	Object	{}	要播放的资源，例如：{ '高清': { source: { [ name: '', url: '', id: '' ] } } }
noteList	Array	[]	mark点，例如：[{ startSecond: 0, imgUrl: '', content: '' }]
muted	Boolean	false	是否静音播放，如果静音播放，浏览器播放策略不会生效(媒体参与度)
autoplay	Boolean	true	是否自动播放
classroomType	Number|String	''	教室类型
isEnableDanmu	Boolean	false	是否启用弹幕
width	Number	0	播放器宽度，如果不填，则默认取宽度100%
height	Number	0	播放器高度，如果不填，则根据宽度16/9 (aspect-ratio: 16 / 9)
isEnableControl	Boolean	false	是否启用遥控，只在mode为websocket时生效
isEnableOcr	Boolean	false	是否启用OCR
isEnableToolbar	Boolean	true	是否启用底部菜单栏
isEnableWaterMarker	Boolean	false	是否启用水印
waterMarkerContent	String	'vue-multi-split-player'	水印内容

Methods

您可以使用 ref 访问播放器实例并调用以下方法：

• current(): 获取当前播放时间（秒）
• duration(): 获取视频总时长（秒）
• _register_emits(emit, value): 注册播放器事件回调
  • 参数: emit - 包含事件类型和回调函数的对象
  • 参数: value - 要设置的值
  • 支持的事件类型:
    • play: 播放视频
    • pause: 暂停视频
    • replay: 重新播放视频（从开始位置）
    • destroy: 销毁播放器实例
    • muted: 设置静音状态
    • rate: 设置播放速度
    • current: 设置播放进度
    • volume: 设置音量0-100

Events

• ready: 播放器准备就绪
• timeupdate: 当前播放时间更新
• startControl: mode为websocket时开始控制
• stopControl: mode为websocket时停止控制
• updateChannel: 通道数量更新
• finished: 播放完毕

Slot

• ocr： 自定义ocr作用域插槽，用于自定义ocr识别逻辑
  • 参数: data - 包含ocr识别结果的对象
  • 示例:

    <template>
      <VueMultiSplitPlayer>
        <template #ocr="data">
          <div>
            <p>OCR识别数据: {{ data }}</p>
          </div>
        </template>
      </VueMultiSplitPlayer>
    </template>

• 弹幕： 自定义弹幕作用域插槽，用于自定义弹幕逻辑
  • 参数: data - 包含弹幕数据的对象
  • 示例:

    <template>
      <VueMultiSplitPlayer>
        <template #danmu="data">
        </template>
      </VueMultiSplitPlayer>
    </template>

License

MIT © 2025 yw.z