top-app-front-component

top-app-front-component

Vue 3 公共组件库（JavaScript），支持全量引入与按需引入。

开发

# 安装依赖
npm install

# 本地预览 playground
npm run dev

# 构建产物（发布前）
npm run build

业务项目中使用

npm install top-app-front-component

全量引入

import { createApp } from 'vue'
import TopAppFrontComponent from 'top-app-front-component'
import 'top-app-front-component/style.css'
import App from './App.vue'

createApp(App).use(TopAppFrontComponent).mount('#app')

按需引入（推荐）

<script setup>
import { LivePlayer } from 'top-app-front-component'
import 'top-app-front-component/style.css'
</script>

<template>
  <LivePlayer
    source="https://your-live-url.m3u8"
    :license="{ domain: 'example.com', key: 'your-license-key' }"
    height="400px"
  />
</template>

LivePlayer（直播）

基于 阿里云 Web 播放器 SDK，仅面向直播场景（isLive: true）。

自定义顶部栏（挂在播放器全屏根节点内，全屏仍可见）：

<LivePlayer
  source="https://your-live-url.m3u8"
  :license="{ domain: 'example.com', key: 'your-key' }"
  :title="roomTitle"
  :online-count="online"
>
  <template #header="{ title, onlineCount, isFullscreen }">
    <div>{{ isFullscreen ? title : '直播中' }} · {{ onlineCount }}人</div>
  </template>
</LivePlayer>

不传 #header 时使用默认布局（状态文案 + 在线人数）。showHeader=false 可完全隐藏顶部栏。

进阶参数走 options 透传。隐藏全部控件：

<LivePlayer
  source="artc://your-rts-url"
  :license="{ domain: 'example.com', key: 'your-key' }"
  :options="{
    skinLayout: [],
  }"
/>

常用事件：ready、error、play、pause、liveStreamStop、rtsTraceId、rtsFallback、showBar、hideBar、fullscreen-change。

组件默认隐藏阿里云官方 errorDisplay，改为自绘报错层（可用 #error 插槽自定义）：

<LivePlayer ...>
  <template #error="{ error, retry }">
    <div>
      <p>{{ error.message }}</p>
      <button type="button" @click="retry">重试</button>
    </div>
  </template>
</LivePlayer>

coverImg 为空或图片加载失败时，组件会自动展示内置默认封面。 顶部栏会跟随阿里云播放器的 showBar、hideBar 事件，与底部控制栏同步显示和隐藏。

可通过 ref 调用：play()、pause()、mute()、unMute()、reload()、getPlayer()。

底部控制栏基于 SDK 原生栏改造：

• 默认不展示官方大播放按钮，改用居中自定义播放图标；底部控制栏保留播放/暂停与全屏
• skinLayout 传 [] 可隐藏全部控件
• 默认通过自定义 components 在控制栏左侧挂载刷新按钮；不想要时传 components: []