vue-aliplay-player

vue-aliplay-player

阿里云 Aliplayer 的 Vue 3 播放器组件封装。TypeScript 全类型、SDK CDN 懒加载（零依赖打包）、支持点播 / 直播 / vid+playauth / 截图水印 / License 接入。

Vue 2 项目请使用 3.x 版本（npm i vue-aliplay-player@3）。

在线演示

https://jabo2017.github.io/vue-aliplay-player/

特性

• 🎯 TypeScript 全类型：props / emits / 暴露方法均有 .d.ts
• 🪶 零依赖打包：Aliplayer SDK 按需 CDN 懒加载（默认 2.27.1，免 License 的最后版本），产物 gzip 仅 ~3KB
• 🔌 双模式：默认 CDN 懒加载；也可 npm 安装 aliyun-aliplayer 后通过 aliplayer prop 注入构造器（SSR / 严格 CSP 友好）
• 📄 License 就绪：已购阿里云播放器 License？配 license prop + 指向 2.28+ SDK 地址即可
• 🔔 事件全转发：ready / playing / pause / ended / error / timeupdate 等 16 个事件，事件名与 3.x 一致
• 🎨 样式自动注入：容器 / 缩放 / 水印样式随组件注入，无需手动引 CSS
• 🧪 vitest 8 例单测覆盖初始化、参数透传、事件转发、销毁重建

安装

npm install vue-aliplay-player

vue（^3.2）为 peer dependency。

组件自带样式（容器布局 / 缩放模式 / 水印层）在引入时自动注入，无需额外 import CSS 文件。

快速上手

<script setup lang="ts">
import { ref } from 'vue'
import VueAliPlayer from 'vue-aliplay-player'
import type { AliplayerInstance } from 'vue-aliplay-player'

const playerRef = ref<InstanceType<typeof VueAliPlayer>>()
const source = 'https://player.alicdn.com/video/aliyunmedia.mp4'

function onReady(inst: AliplayerInstance | null) {
  inst?.play()
}
</script>

<template>
  <div style="width: 640px; aspect-ratio: 16/9">
    <VueAliPlayer ref="playerRef" :source="source" @ready="onReady" />
  </div>
</template>

全局注册：

import VueAliPlayer from 'vue-aliplay-player'
app.use(VueAliPlayer) // <vue-ali-play-player /> 或 <VueAliPlayer />

Props（与 3.x 同名兼容）

其余 Aliplayer 参数（rePlay、preload、playsinline、controlBarVisibility、x5_*、autoPlayDelay、waitingTimeout 等）与 3.x 同名透传，见类型定义。

事件

ready play playing pause ended waiting error timeupdate liveStreamStop m3u8Retry hideBar snapshoted requestFullScreen cancelFullScreen startSeek completeSeek

payload 均为 Aliplayer 实例。

暴露方法

play pause replay seek(t) getCurrentTime getDuration getVolume setVolume(v) setSpeed(s) setPlayerSize(w,h) setCover(url) loadByUrl(url, t?) reloadPlayer(url?) reloaduserPlayInfoAndVidRequestMts(vid, playauth) getStatus getFullStatus setFull cancelFull dispose

playerRef.value?.seek(30)

License 说明

阿里云 Web 播放器 SDK 自 2.28.0（2024-12）起强制校验 License。本组件默认 SDK 为 2.27.1（最后一个免 License 版本）。已购 License 的接法：

<VueAliPlayer
  sdk-url="https://g.alicdn.com/apsara-media-box/imp-web-player/2.39.0/aliplayer-min.js"
  sdk-css-url="https://g.alicdn.com/apsara-media-box/imp-web-player/2.39.0/skins/default/aliplayer-min.css"
  :license="{ key: '...', encKey: '...', domain: '...' }"
  :source="source"
/>

本地开发

pnpm install
pnpm dev          # demo 页
pnpm typecheck    # vue-tsc
pnpm test         # vitest
pnpm build        # 库产物（ES + UMD + d.ts）
pnpm build:demo   # Pages 演示页

License

MIT