用法

使用包管理器（如 NPM、Yarn 或 pnpm）安装

npm install @boldarialblack/multi-stream-player --save

@boldarialblack/multi-stream-player 支持 Vue 2.7.0+ 和 Vue 3.0.0+

Vue 3 使用方式

import { createApp } from 'vue'
import App from './App.vue'
import StreamPlayer from '@boldarialblack/multi-stream-player'
import '@boldarialblack/multi-stream-player/style.css';

const app = createApp(App)
app.use(StreamPlayer)
app.mount('#app')

在组件中使用：

<template>
  <div>
    <!-- 直接使用组件 -->
    <StreamPlayer :src="url" />
    
    <!-- 或使用对话框模式 -->
    <button @click="openPlayer">打开播放器</button>
  </div>
</template>

<script>
export default {
  methods: {
    openPlayer() {
      this.$streamPlayer.open({
        title: '播放器',
        src: 'http://example.com/stream'
      })
    }
  }
}
</script>

Vue 2 使用方式

import Vue from 'vue'
import App from './App.vue'
import StreamPlayer from '@boldarialblack/multi-stream-player'
import '@boldarialblack/multi-stream-player/style.css';

Vue.use(StreamPlayer)

new Vue({
  render: h => h(App)
}).$mount('#app')

在组件中使用：

<template>
  <div>
    <!-- 直接使用组件 -->
    <StreamPlayer :src="url" />
    
    <!-- 或使用对话框模式 -->
    <button @click="openPlayer">打开播放器</button>
  </div>
</template>

<script>
export default {
  methods: {
    openPlayer() {
      this.$streamPlayer.open({
        title: '播放器',
        src: 'http://example.com/stream'
      })
    }
  }
}
</script>

详细文档

指路 ➡️ /docs/components/index.md

快速开发

想要了解或更改组件，运行命令行即可快速查看实时demo及文档

$ npm run dev

Recommended IDE Setup

• VS Code + Volar (and disable Vetur).