ckplayer-plus 1.0.0

package/LICENSE

@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (c) 2020 niandeng
+Copyright (c) 2026 ckplayer-plus contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,173 @@
+# ckplayer-plus
+
+基于 [ckplayer](https://www.ckplayer.com) X3 的工程化封装：支持 **npm / ESM**，并提供 **Vue 2/3** 与 **React** 组件。
+
+> **免责声明**：本包为社区/工程化封装，**非 ckplayer 官方包**。播放内核来自 ckplayer（MIT）。完整能力与参数请同时参考 [官方手册](https://www.ckplayer.com/manual/)。npm 上的官方包名为 [`ckplayer`](https://www.npmjs.com/package/ckplayer)，请勿混淆。
+
+## 安装（只需这一步）
+
+```bash
+npm i ckplayer-plus
+```
+
+**不必再单独安装** `hls.js` / `flv.js` / `mpegts.js`。  
+包内已附带对应脚本；播放时会按视频地址**自动选择插件并按需加载**。
+
+## 自动识别规则（默认开启）
+
+| 地址特征 | 行为 |
+|----------|------|
+| `.mp4` 等浏览器可直接播的格式 | 原生 `<video>`，不加载流媒体脚本 |
+| `.m3u8` | 自动使用 `hls.js`（Safari 若原生支持则仍走原生） |
+| `.flv` | 自动使用 `flv.js` |
+| `.ts` / `.m2ts` / `.mts` | 自动使用 `mpegts.js` |
+
+关闭自动识别：`autoPlug: false`，并自行传 `plug`。
+
+## 引入样式（必做）
+
+```js
+import 'ckplayer-plus/style.css'
+```
+
+## 最简用法（mp4 / m3u8 都这样写）
+
+```js
+import ckplayer from 'ckplayer-plus'
+import 'ckplayer-plus/style.css'
+
+const player = new ckplayer({
+  container: '#player',
+  video: url // 可以是 mp4 或 m3u8，无需再写 plug
+})
+```
+
+Vue：
+
+```vue
+<CkPlayer :video="url" height="400px" />
+```
+
+React：
+
+```jsx
+<CkPlayer video={url} height="400px" />
+```
+
+## 配置说明（哪些要写、哪些不用写）
+
+### 常用且推荐
+
+| 配置 | 是否必须 | 默认 | 说明 |
+|------|----------|------|------|
+| `container` | 核心 API 必须；组件不用 | — | 播放器挂载节点。Vue/React 组件内部自动创建，**不要传** |
+| `video` | 必须 | — | 视频地址或清晰度数组 |
+| `poster` | 可选 | `''` | 封面图 |
+| `autoplay` | 可选 | `false` | 自动播放（移动端常需静音） |
+| `volume` | 可选 | `0.8` | 音量 0–1 |
+| `live` | 可选 | `false` | 直播相关 |
+| `width` / `height` | 组件可选 | `100%` / `400px` | 仅 Vue/React 组件样式 |
+
+### 一般不用写（已内置默认行为）
+
+| 配置 | 默认 | 说明 |
+|------|------|------|
+| `autoPlug` | `true` | 按地址自动选插件；通常保持默认即可 |
+| `plug` | 自动 | 仅在要强制指定或 `autoPlug: false` 时填写：`hls.js` / `flv.js` / `mpegts.js` |
+| `pluginPath` | 自动 | 插件脚本根路径。默认：`window.ckplayerBasePath` → 本包 `dist/` → jsDelivr CDN |
+| `loaded` | — | **只支持函数**；字符串形式已禁用（防 XSS） |
+
+### 进阶（按需）
+
+| 配置 | 说明 |
+|------|------|
+| `crossOrigin` | 跨域视频 / 截图等场景 |
+| `cookie` | 进度记忆；组件默认使用实例唯一名，避免多实例冲突 |
+| `language` | 语言包名，如 `en`、`zh.hk`（需能加载到 `language/*.js`） |
+| `seek` / `loop` / `controls` 等 | 与官方 ckplayer 一致，见[手册](https://www.ckplayer.com/manual/) |
+| `window.ckplayerBasePath` | 全局指定插件根目录（以 `/` 结尾），优先于 CDN |
+| `window.ckplayerPlusCdn` | 自定义 CDN 根地址（覆盖默认 jsDelivr） |
+
+### 插件加载优先级
+
+1. 页面上已有全局 `Hls` / `flvjs` / `mpegts` → 直接用，不再请求脚本  
+2. `pluginPath` 或 `window.ckplayerBasePath`  
+3. 传统 `<script src=".../ckplayer.min.js">` 同级目录推导  
+4. 回退：`https://cdn.jsdelivr.net/npm/ckplayer-plus@x.y.z/dist/`（发布到 npm 后可用）
+
+> 内网离线：把 `node_modules/ckplayer-plus/dist/` 里的 `hls.js/` 等目录放到可访问静态路径，并设置 `pluginPath` 或 `window.ckplayerBasePath`。
+
+## Vue 2 / Vue 3
+
+```vue
+<template>
+  <CkPlayer :video="url" poster="/poster.png" height="400px" @play="onPlay" />
+</template>
+
+<script>
+import { CkPlayer } from 'ckplayer-plus/vue'
+import 'ckplayer-plus/style.css'
+
+export default {
+  components: { CkPlayer },
+  data() {
+    return { url: 'https://example.com/a.m3u8' } // 或 .mp4
+  },
+  methods: { onPlay() {} }
+}
+</script>
+```
+
+SSR（Nuxt 等）请用 `<ClientOnly>`，仅在浏览器初始化。
+
+## React
+
+```jsx
+import { CkPlayer } from 'ckplayer-plus/react'
+import 'ckplayer-plus/style.css'
+
+<CkPlayer video={url} height="400px" onPlay={() => {}} />
+```
+
+Next.js 使用 Client Component 或 `dynamic(..., { ssr: false })`。
+
+## 脚本标签
+
+```html
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ckplayer-plus/dist/ckplayer.css" />
+<script src="https://cdn.jsdelivr.net/npm/ckplayer-plus/dist/ckplayer.min.js"></script>
+<div id="player" style="width:800px;height:450px;"></div>
+<script>
+  new ckplayer({
+    container: '#player',
+    video: 'https://example.com/video.mp4'
+  })
+</script>
+```
+
+## 重要说明
+
+| 主题 | 说明 |
+|------|------|
+| SSR | 依赖 `document`，必须客户端初始化 |
+| 移动端自动播 | 常需 `volume: 0` 或用户手势 |
+| dash.js | 未实现 |
+| 体积 | 主包含流媒体 min 脚本以便「只装一个包」；运行时仍按需加载 |
+
+## 开发与发布
+
+```bash
+npm install
+npm run build
+npm publish --access public
+```
+
+## License
+
+MIT。内置的 hls.js / flv.js / mpegts.js 遵循各自许可证（多为 Apache-2.0）。
+
+## 相关链接
+
+- 官网：https://www.ckplayer.com  
+- 手册：https://www.ckplayer.com/manual/  
+- 官方 npm：https://www.npmjs.com/package/ckplayer