更新记录

1.0.3（2026-05-29）下载此版本

PSTV 视频播放器

基于 web-view + HLS 的全屏视频播放 uni-app 插件，从 PSTV 项目中拆出，适用于影视类 App / H5。

特性

HLS（m3u8）流媒体播放，内置 hls.js（CDN）
全屏手势控制、选集面板、片头片尾跳过
播放进度本地恢复（startEp / startTime）
与宿主页面通信：返回、收藏、进度上报
App 端通过 plus.storage 桥接；H5 端通过 iframe hash 桥接
附带 pstv-mui-player（H5 轻量 mui-player 封装，可选）

平台支持

平台	支持	说明
App (Vue)	✅ 推荐	web-view
H5	✅	原生 iframe + 绝对路径，自动推断 apiBase
各类小程序	❌	web-view 限制，请用原生 video

安装

方式一：复制 uni_modules（推荐）

将整个 uni_modules/pstv-video-player 文件夹复制到目标项目的 uni_modules 目录下。

HBuilderX 会自动识别并按 easycom 规则注册组件，无需手动 import。

方式二：插件市场

打包本目录上传到 DCloud 插件市场，在 HBuilderX 中通过「uni_modules」导入。

pstv-mui-player 依赖 mui-player 与 hls.js，仅 H5 使用。请在宿主项目 package.json 中安装：
npm install mui-player hls.js

快速开始

App / 通用全屏播放（pstv-video-player）

<template>
  <view class="page">
    <pstv-video-player
      :title="title"
      :source="source"
      :video-id="videoId"
      :play-url="playUrl"
      :api-base="apiBase"
      :token="token"
      :ep-count="12"
      :start-ep="0"
      :start-time="120"
      :favorited="isFavorited"
      @back="onBack"
      @favorite="onFavorite"
      @ready="onReady"
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
      title: '示例剧集',
      source: 'demo',
      videoId: '1001',
      playUrl: 'https://example.com/video.m3u8',
      apiBase: 'https://your-api.com/api',
      token: '',
      isFavorited: false
    }
  },
  methods: {
    onBack() {
      uni.navigateBack()
    },
    onFavorite(progress) {
      // progress: { episodeIndex, currentTime, duration }
      this.isFavorited = !this.isFavorited
    },
    onReady({ url }) {
      console.log('player ready:', url)
    }
  }
}
</script>

<style>
.page {
  width: 100%;
  height: 100vh;
}
</style>

H5 轻量播放（pstv-mui-player）

<template>
  <view style="height: 220px;">
    <pstv-mui-player
      :src="playUrl"
      :poster="cover"
      @timeupdate=""
    />
  </view>
</template>

组件 API

pstv-video-player

Props

属性	类型	默认值	说明
playUrl	String	`''`	首集/当前播放地址（m3u8 或 mp4）
title	String	`'视频'`	标题
source	String	`''`	数据源标识（选集 API 用）
videoId	String	`''`	视频 ID
apiBase	String	`''`	后端 API 基地址，供 player.html 拉取选集
token	String	`''`	鉴权 Token
epCount	Number	`0`	总集数
startEp	Number	`-1`	起始集索引（从 0 开始），-1 不传
startTime	Number	`0`	起始播放秒数
favorited	Boolean	`false`	是否已收藏
playerPath	String	`''`	自定义 player.html 路径
showLoadingOverlay	Boolean	`true`	是否显示加载动画
autoLoad	Boolean	`true`	是否自动根据 props 加载

Events

事件	参数	说明
back	-	用户点击返回
favorite	progress	用户点击收藏
ready	`{ url }`	web-view URL 已生成
error	err	加载失败
progress	data	播放进度（若 player.html 上报）

Methods（通过 ref 调用）

方法	说明
reload()	按当前 props 重新加载
setFavoriteState(bool)	同步收藏图标
resumePlay(epIndex, seconds)	恢复播放
getProgress()	读取当前进度

pstv-mui-player（仅 H5）

Prop	类型	说明
src	String	播放地址
poster	String	封面
autoplay	Boolean	自动播放
themeColor	String	主题色

事件：play / pause / ended / timeupdate / error

player.html 参数说明

内置页面路径：/uni_modules/pstv-video-player/static/html/player.html

也可使用工具函数手动拼接：

import { buildPlayerUrl } from '@/uni_modules/pstv-video-player/utils/player-url.js'

const url = buildPlayerUrl({
  title: '标题',
  source: '源',
  id: '123',
  url: 'https://xxx.m3u8',
  apiBase: 'https://api.xxx.com/api',
  token: 'xxx',
  favorited: false,
  epCount: 24,
  startEp: 2,
  startTime: 60
})

与后端 API 约定

player.html 会请求（需自行对接或修改 player.html 内逻辑）：

接口	说明
`GET {apiBase}/play/{source}/{id}`	获取详情与 `episodes` 列表
`GET {apiBase}/player/parse-ffzy?url={rawUrl}`	将分享页解析为 m3u8

请求头：Authorization: Bearer {token}（有 token 时）

返回 JSON 中播放地址字段支持：url / playUrl / link / src / videoUrl。

目录结构

uni_modules/pstv-video-player/
├── package.json
├── readme.md
├── changelog.md
├── components/
│   ├── pstv-video-player/     # 主播放器（web-view）
│   └── pstv-mui-player/       # H5 轻量播放器
├── static/html/
│   └── player.html            # 全屏播放页
└── utils/
    ├── player-url.js          # URL 构建
    └── player-bridge.js       # 与 player.html 通信

发布到插件市场

在 DCloud 开发者中心创建插件
类型选择 uni_modules
将 uni_modules/pstv-video-player 打成 zip（保持目录结构）
填写 package.json 中 dcloudext.declaration（广告、隐私、权限）
上传并提交审核

注意事项

H5 播放：组件在 H5 下使用 iframe 加载 player.html，并自动拼接 origin 绝对路径；apiBase 未传时会按当前域名推断（开发环境默认 :8081/api）
hls.js：已内置在 static/js/hls.min.js，不依赖外网 CDN
网络权限：App 需配置允许访问视频域名
小程序不支持：微信小程序等无法使用本方案
收藏/历史：业务逻辑由宿主 @favorite / @back 处理
自定义样式：可修改 static/html/player.html

开源协议

MIT

更新日志

见 changelog.md

平台兼容性

其他

多语言	暗黑模式	宽屏模式
√	√	√

PSTV 视频播放器

基于 web-view + HLS 的全屏视频播放 uni-app 插件，从 PSTV 项目中拆出，适用于影视类 App / H5。

特性

HLS（m3u8）流媒体播放，内置 hls.js（CDN）
全屏手势控制、选集面板、片头片尾跳过
播放进度本地恢复（startEp / startTime）
与宿主页面通信：返回、收藏、进度上报
App 端通过 plus.storage 桥接；H5 端通过 iframe hash 桥接
附带 pstv-mui-player（H5 轻量 mui-player 封装，可选）

平台支持

平台	支持	说明
App (Vue)	✅ 推荐	web-view
H5	✅	原生 iframe + 绝对路径，自动推断 apiBase
各类小程序	❌	web-view 限制，请用原生 video

安装

方式一：复制 uni_modules（推荐）

将整个 uni_modules/pstv-video-player 文件夹复制到目标项目的 uni_modules 目录下。

HBuilderX 会自动识别并按 easycom 规则注册组件，无需手动 import。

方式二：插件市场

打包本目录上传到 DCloud 插件市场，在 HBuilderX 中通过「uni_modules」导入。

pstv-mui-player 依赖 mui-player 与 hls.js，仅 H5 使用。请在宿主项目 package.json 中安装：
npm install mui-player hls.js

快速开始

App / 通用全屏播放（pstv-video-player）

<template>
  <view class="page">
    <pstv-video-player
      :title="title"
      :source="source"
      :video-id="videoId"
      :play-url="playUrl"
      :api-base="apiBase"
      :token="token"
      :ep-count="12"
      :start-ep="0"
      :start-time="120"
      :favorited="isFavorited"
      @back="onBack"
      @favorite="onFavorite"
      @ready="onReady"
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
      title: '示例剧集',
      source: 'demo',
      videoId: '1001',
      playUrl: 'https://example.com/video.m3u8',
      apiBase: 'https://your-api.com/api',
      token: '',
      isFavorited: false
    }
  },
  methods: {
    onBack() {
      uni.navigateBack()
    },
    onFavorite(progress) {
      // progress: { episodeIndex, currentTime, duration }
      this.isFavorited = !this.isFavorited
    },
    onReady({ url }) {
      console.log('player ready:', url)
    }
  }
}
</script>

<style>
.page {
  width: 100%;
  height: 100vh;
}
</style>

H5 轻量播放（pstv-mui-player）

<template>
  <view style="height: 220px;">
    <pstv-mui-player
      :src="playUrl"
      :poster="cover"
      @timeupdate=""
    />
  </view>
</template>

组件 API

pstv-video-player

Props

属性	类型	默认值	说明
playUrl	String	`''`	首集/当前播放地址（m3u8 或 mp4）
title	String	`'视频'`	标题
source	String	`''`	数据源标识（选集 API 用）
videoId	String	`''`	视频 ID
apiBase	String	`''`	后端 API 基地址，供 player.html 拉取选集
token	String	`''`	鉴权 Token
epCount	Number	`0`	总集数
startEp	Number	`-1`	起始集索引（从 0 开始），-1 不传
startTime	Number	`0`	起始播放秒数
favorited	Boolean	`false`	是否已收藏
playerPath	String	`''`	自定义 player.html 路径
showLoadingOverlay	Boolean	`true`	是否显示加载动画
autoLoad	Boolean	`true`	是否自动根据 props 加载

Events

事件	参数	说明
back	-	用户点击返回
favorite	progress	用户点击收藏
ready	`{ url }`	web-view URL 已生成
error	err	加载失败
progress	data	播放进度（若 player.html 上报）

Methods（通过 ref 调用）

方法	说明
reload()	按当前 props 重新加载
setFavoriteState(bool)	同步收藏图标
resumePlay(epIndex, seconds)	恢复播放
getProgress()	读取当前进度

pstv-mui-player（仅 H5）

Prop	类型	说明
src	String	播放地址
poster	String	封面
autoplay	Boolean	自动播放
themeColor	String	主题色

事件：play / pause / ended / timeupdate / error

player.html 参数说明

内置页面路径：/uni_modules/pstv-video-player/static/html/player.html

也可使用工具函数手动拼接：

import { buildPlayerUrl } from '@/uni_modules/pstv-video-player/utils/player-url.js'

const url = buildPlayerUrl({
  title: '标题',
  source: '源',
  id: '123',
  url: 'https://xxx.m3u8',
  apiBase: 'https://api.xxx.com/api',
  token: 'xxx',
  favorited: false,
  epCount: 24,
  startEp: 2,
  startTime: 60
})

与后端 API 约定

player.html 会请求（需自行对接或修改 player.html 内逻辑）：

接口	说明
`GET {apiBase}/play/{source}/{id}`	获取详情与 `episodes` 列表
`GET {apiBase}/player/parse-ffzy?url={rawUrl}`	将分享页解析为 m3u8

请求头：Authorization: Bearer {token}（有 token 时）

返回 JSON 中播放地址字段支持：url / playUrl / link / src / videoUrl。

目录结构

uni_modules/pstv-video-player/
├── package.json
├── readme.md
├── changelog.md
├── components/
│   ├── pstv-video-player/     # 主播放器（web-view）
│   └── pstv-mui-player/       # H5 轻量播放器
├── static/html/
│   └── player.html            # 全屏播放页
└── utils/
    ├── player-url.js          # URL 构建
    └── player-bridge.js       # 与 player.html 通信

发布到插件市场

在 DCloud 开发者中心创建插件
类型选择 uni_modules
将 uni_modules/pstv-video-player 打成 zip（保持目录结构）
填写 package.json 中 dcloudext.declaration（广告、隐私、权限）
上传并提交审核

注意事项

H5 播放：组件在 H5 下使用 iframe 加载 player.html，并自动拼接 origin 绝对路径；apiBase 未传时会按当前域名推断（开发环境默认 :8081/api）
hls.js：已内置在 static/js/hls.min.js，不依赖外网 CDN
网络权限：App 需配置允许访问视频域名
小程序不支持：微信小程序等无法使用本方案
收藏/历史：业务逻辑由宿主 @favorite / @back 处理
自定义样式：可修改 static/html/player.html

开源协议

MIT

更新日志

见 changelog.md

短视频播放器组件 短视频，播放器，滑动换集

更新记录

1.0.3（2026-05-29） 下载此版本

PSTV 视频播放器

特性

平台支持

安装

方式一：复制 uni_modules（推荐）

方式二：插件市场

快速开始

App / 通用全屏播放（pstv-video-player）

H5 轻量播放（pstv-mui-player）

组件 API

pstv-video-player

Props

Events

Methods（通过 ref 调用）

pstv-mui-player（仅 H5）

player.html 参数说明

与后端 API 约定

目录结构

发布到插件市场

注意事项

开源协议

更新日志

平台兼容性

其他

PSTV 视频播放器

特性

平台支持

安装

方式一：复制 uni_modules（推荐）

方式二：插件市场

快速开始

App / 通用全屏播放（pstv-video-player）

H5 轻量播放（pstv-mui-player）

组件 API

pstv-video-player

Props

Events

Methods（通过 ref 调用）

pstv-mui-player（仅 H5）

player.html 参数说明

与后端 API 约定

目录结构

发布到插件市场

注意事项

开源协议

更新日志

隐私、权限声明

1. 本插件需要申请的系统权限列表：

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

许可协议

MIT协议

简洁时钟

短视频播放器组件

Modal title

短视频播放器组件短视频，播放器，滑动换集

1.0.3（2026-05-29）下载此版本