more-player

KO | EN

gitlite — search

#react #typescript #llm #go #golang #machine-learning #macos #awesome #cli #vue #security #mcp #ios #open-source

(★ 5)

基于@easydarwin/easywasmplayer、vue3.x、typescript封装的多屏播放组件

more-player 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

## 多屏插件
    基于@easydarwin/easywasmplayer、vue3.x、typescript封装的多屏播放组件
### 依赖
    -Vue3.x
    -typescript
    -@easydarwin/easywasmplayer
### 安装插件
```
npm install more-player
```
### 引入方式
````javascript
import { createApp } from 'vue'
import App from './App.vue'
import MorePlayer from 'more-player'
import 'more-player/more-player.css'

const app = createApp(App)
app.use(MorePlayer)
app.mount('#app')
````
### 事例
```javascript
<template>
  <more-player
    :src="src"
    :equipment="equipment"
    :backgroundColor="backgroundColor"
    :borderColor="borderColor"
    :activeColor="activeColor"
    :textColor="textColor"
    @videoClick="videoClick"
  >
    
  </more-player>
</template>

export default defineComponent({
  name: "App",
  setup() {
    let state = reactive({
      src: "ws://10.0.60.168:80/rtp/00000001.flv",
      equipment: null, //设备信息
      backgroundColor: "transparent",
      borderColor: "rgba(69, 162, 255, 0.8)",
      activeColor: "#ffe100",
      textColor: "white",
    });
    const videoClick = (e: { active: number; num: number; info: any }) => {
      console.log(e);
    };
    return {
      ...toRefs(state),
      videoClick,
    };
  },
});
</script>

```
### 参数
  #### 1.属性
    -src：视频流地址
    -equipment：设备信息
    -backgroundColor：背景色
    -borderColor：边框颜色
    -textCorlor：字体颜色
    -activeColor：当前激活窗口颜色
  #### 2.方法
    -videoClick(e)：返回当前选中视频的设备信息
        -参数e：active,当前激活窗口；num：当前宫格数；info：当前设备信息

more-player

more-player 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

more-player

more-player 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README