ckplayer-plus 1.1.10 → 1.1.11

package/README.md

@@ -1,176 +1,178 @@
-# ckplayer-plus
-
-基于 [ckplayer](https://www.ckplayer.com) X3 的工程化封装：支持 **npm / ESM**，并提供 **Vue 2.7+/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` | 自动播放。**课程/断点续播请保持 `false`**：有 `seek` 时组件会强制关闭自动播，只定位进度，需用户点击播放 |
-| `volume` | 可选 | `0.8` | 音量 0–1 |
-| `live` | 可选 | `false` | 直播相关 |
-| `width` / `height` | 组件可选 | `100%` / `400px` | 仅 Vue/React 组件样式 |
-
-### 一般不用写（已内置默认行为）
-
-| 配置 | 默认 | 说明 |
-|------|------|------|
-| `autoPlug` | `true` | 按地址自动选插件；通常保持默认即可 |
-| `plug` | 自动 | 仅在要强制指定或 `autoPlug: false` 时填写：`hls.js` / `flv.js` / `mpegts.js` |
-| `preferBuiltinPlug` | `true` | 优先加载本包内置脚本，避免复用页面上其它全局 `Hls` |
-| `cdnFallback` | `true` | `getPath` 失败时回退 jsDelivr；内网无外网请设 `false` 并配 `pluginPath` |
-| `pluginPath` | 自动 | 插件脚本根路径。默认：`window.ckplayerBasePath` → 本包 `dist/` → jsDelivr CDN |
-| `seek` | `0` | 续播秒数。HLS 对齐分片起点缓冲后再定位；**只 seek 不自动 play**，避免 Network 出现 canceled `.ts` |
-| `loaded` | — | **只支持函数**；字符串形式已禁用（防 XSS） |
-
-### 进阶（按需）
-
-| 配置 | 说明 |
-|------|------|
-| `timeScheduleAdjust` | `5` 时只能在已看进度内拖动；续播请同时传数字 `seek` |
-| `crossOrigin` | 跨域视频 / 截图等场景 |
-| `cookie` | 进度记忆；组件默认使用实例唯一名，避免多实例冲突 |
-| `language` | 语言包名，如 `en`、`zh.hk`（需能加载到 `language/*.js`） |
-| `loop` / `controls` 等 | 与官方 ckplayer 一致，见[手册](https://www.ckplayer.com/manual/) |
-| `window.ckplayerBasePath` | 全局指定插件根目录（以 `/` 结尾），优先于 CDN |
-| `window.ckplayerPlusCdn` | 自定义 CDN 根地址（覆盖默认 jsDelivr） |
-
-### 插件加载优先级
-
-1. `preferBuiltinPlug: false` 且页面已有全局 `Hls` / `flvjs` / `mpegts` → 直接复用  
-2. 否则加载本包脚本：`pluginPath` 或可信的 `window.ckplayerBasePath`（仅 dist / npm 包路径会自动设置；Vite/Webpack chunk 目录会忽略）  
-3. 传统 `<script src=".../ckplayer.min.js">` 同级目录推导  
-4. `cdnFallback !== false` 时回退：`https://cdn.jsdelivr.net/npm/ckplayer-plus@x.y.z/dist/`；若本地路径 404 会再自动重试一次 CDN  
-
-> 内网离线：把 `node_modules/ckplayer-plus/dist/` 里的 `hls.js/` 等目录放到可访问静态路径，并设置 `pluginPath` 或 `window.ckplayerBasePath`，建议同时 `cdnFallback: false`。  
-> 样式请使用 `import 'ckplayer-plus/style.css'`，保证 `./images/` 图标能被打包工具解析。
-
-## Vue 2.7 / Vue 3
-
-支持 **Vue 2.7+** 与 **Vue 3**（需从 `vue` 解析 `h`，与 peerDependencies 一致）。
-
-```vue
-<template>
-  <CkPlayer :video="url" :seek="16" 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>
-```
-
-断点续播：`seek` 用 `:seek` 或 `options.seek` 在创建时传入；**不要**在 `@ready` 里再 `player.seek(16)`，否则会重复加载 HLS、取消 `.ts` 分片导致卡住。有 `seek` 时不会自动播放，定位完成后点中央播放按钮即可。切集/切换清晰度同样不强制自动播。
-
-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）。
+# ckplayer-plus
+
+基于 [ckplayer](https://www.ckplayer.com) X3 的工程化封装：支持 **npm / ESM**，并提供 **Vue 2.7+/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` | 自动播放。**课程/断点续播请保持 `false`**：有 `seek` 时组件会强制关闭自动播，只定位进度，需用户点击播放 |
+| `volume` | 可选 | `0.8` | 音量 0–1 |
+| `live` | 可选 | `false` | 直播相关 |
+| `width` / `height` | 组件可选 | `100%` / `400px` | 仅 Vue/React 组件样式 |
+
+### 一般不用写（已内置默认行为）
+
+| 配置 | 默认 | 说明 |
+|------|------|------|
+| `autoPlug` | `true` | 按地址自动选插件；通常保持默认即可 |
+| `plug` | 自动 | 仅在要强制指定或 `autoPlug: false` 时填写：`hls.js` / `flv.js` / `mpegts.js` |
+| `preferBuiltinPlug` | `true` | 优先加载本包内置脚本，避免复用页面上其它全局 `Hls` |
+| `cdnFallback` | `true` | `getPath` 失败时回退 jsDelivr；内网无外网请设 `false` 并配 `pluginPath` |
+| `pluginPath` | 自动 | 插件脚本根路径。默认：`window.ckplayerBasePath` → 可信 script/`dist` → jsDelivr CDN。**Vue/React + Vite 一般不用配**，勿设成 `/src/` |
+| `seek` | `0` | 续播秒数。HLS 对齐分片起点缓冲后再定位；**只 seek 不自动 play**，避免 Network 出现 canceled `.ts` |
+| `loaded` | — | **只支持函数**；字符串形式已禁用（防 XSS） |
+
+### 进阶（按需）
+
+| 配置 | 说明 |
+|------|------|
+| `timeScheduleAdjust` | `5` 时只能在已看进度内拖动；续播请同时传数字 `seek` |
+| `crossOrigin` | 跨域视频 / 截图等场景 |
+| `cookie` | 进度记忆；组件默认使用实例唯一名，避免多实例冲突 |
+| `language` | 语言包名，如 `en`、`zh.hk`（需能加载到 `language/*.js`） |
+| `loop` / `controls` 等 | 与官方 ckplayer 一致，见[手册](https://www.ckplayer.com/manual/) |
+| `window.ckplayerBasePath` | 全局指定插件根目录（以 `/` 结尾），优先于 CDN |
+| `window.ckplayerPlusCdn` | 自定义 CDN 根地址（覆盖默认 jsDelivr） |
+
+### 插件加载优先级
+
+1. `preferBuiltinPlug: false` 且页面已有全局 `Hls` / `flvjs` / `mpegts` → 直接复用  
+2. 否则加载本包脚本：`pluginPath` 或可信的 `window.ckplayerBasePath`（仅 dist / npm 包路径会自动设置；`/src`、`assets`、`.vite/deps`、chunk 目录会忽略）  
+3. 传统 `<script src=".../ckplayer.min.js">` 同级目录推导（**不会**再用页面最后一个无关 script，避免 Vite 指到 `/src/main.js`）  
+4. `cdnFallback !== false` 时回退：`https://cdn.jsdelivr.net/npm/ckplayer-plus@x.y.z/dist/`；若本地路径 404 会再自动重试一次 CDN  
+
+> **Vue 2.7 / Vue 3 / React（Vite/Webpack）**：直接 `import { CkPlayer } from 'ckplayer-plus/vue'`（或 `/react`）即可，hls/flv 会走 CDN 或你配置的 `pluginPath`。不要把 `pluginPath` 设成业务的 `/src/`。  
+> 内网离线：把 `node_modules/ckplayer-plus/dist/` 里的 `hls.js/` 等目录拷到可访问静态路径（也可用 `public/ckplayer-plus/`），并设置 `pluginPath` 或 `window.ckplayerBasePath`，建议同时 `cdnFallback: false`。  
+> 本地调试本仓库 demo：先 `npm run build`，再用静态服务打开 `examples/demo.html`（`dist/` 被 gitignore，不重建会跑到旧逻辑）。  
+> 样式请使用 `import 'ckplayer-plus/style.css'`，保证 `./images/` 图标能被打包工具解析。
+
+## Vue 2.7 / Vue 3
+
+支持 **Vue 2.7+** 与 **Vue 3**（需从 `vue` 解析 `h`，与 peerDependencies 一致）。
+
+```vue
+<template>
+  <CkPlayer :video="url" :seek="16" 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>
+```
+
+断点续播：`seek` 用 `:seek` 或 `options.seek` 在创建时传入；**不要**在 `@ready` 里再 `player.seek(16)`，否则会重复加载 HLS、取消 `.ts` 分片导致卡住。有 `seek` 时不会自动播放，定位完成后点中央播放按钮即可。切集/切换清晰度同样不强制自动播。
+
+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）。

package/dist/ckplayer.js

@@ -141,7 +141,7 @@
 		cdnFallback:true// getPath 失败时是否回退到 jsDelivr（内网可设 false，并配置 pluginPath）
 	};
 	// 打包时替换为真实版本；用于 bundler 下 getPath 失效时的 CDN 回退
-	var ckplayerPlusDefaultCdn='https://cdn.jsdelivr.net/npm/ckplayer-plus@1.1.10/dist/';
+	var ckplayerPlusDefaultCdn='https://cdn.jsdelivr.net/npm/ckplayer-plus@1.1.11/dist/';
 	function ckplayerEmbed(videoObj){
 		/*
 		 * rightMenu
@@ -411,16 +411,6 @@
 				return embed(obj);
 			}
 		},
-		/*
-		 * isUnreliablePluginBase
-		 * 功能：识别 bundler chunk 目录（不含 hls.js 等插件），避免短路 CDN 回退
-		*/
-		isUnreliablePluginBase=function(base){
-			if(!base || valType(base)!='string'){
-				return true;
-			}
-			return /\/(?:assets|\.vite\/deps|_next\/static|chunks?)\/?$/i.test(base);
-		},
 		/*
 		 * resolveAssetPath
 		 * 功能：解析插件/语言包路径
@@ -443,13 +433,14 @@
 				}
 				return base+folder+'/'+file;
 			}
-			var fromScript=getPath(folder)+file;
-			if(fromScript && fromScript.indexOf(folder+'/')>-1 && fromScript.indexOf('undefined')===-1 && !isUnreliablePluginBase(getPath())){
+			var scriptBase=getPath();
+			var fromScript=scriptBase ? (getPath(folder)+file) : '';
+			if(fromScript && fromScript.indexOf(folder+'/')>-1 && fromScript.indexOf('undefined')===-1 && !isUnreliablePluginBase(scriptBase)){
 				return fromScript;
 			}
 			var allowCdn=!vars || vars['cdnFallback']!==false;
 			var cdn=(typeof window!=='undefined' && window.ckplayerPlusCdn) ? window.ckplayerPlusCdn : ckplayerPlusDefaultCdn;
-			if(!allowCdn || !cdn || cdn.indexOf('1.1.10')>-1){
+			if(!allowCdn || !cdn || cdn.indexOf('1.1.11')>-1){
 				// 避免占位版本或显式关闭 CDN 时请求坏地址；交给相对路径或业务 pluginPath
 				return folder+'/'+file;
 			}
@@ -7511,11 +7502,11 @@
 				removeListener(script, 'load', w3c);
 				removeListener(script, 'error', w3cError);
 				removeScript();
-				// bundler 下错误 base 路径 404 时，回退 jsDelivr 再试一次
+				// bundler 下错误 base 路径 404 时，回退 jsDelivr 再试一次（兼容相对路径 hls.js/xxx）
 				if(!isRetry && (!vars || vars['cdnFallback']!==false)){
 					var cdn=(typeof window!=='undefined' && window.ckplayerPlusCdn) ? window.ckplayerPlusCdn : ckplayerPlusDefaultCdn;
-					var m=String(file).match(/\/(hls\.js|flv\.js|mpegts\.js|language)\/([^/?#]+)(?:[?#].*)?$/i);
-					if(cdn && cdn.indexOf('1.1.10')===-1 && m){
+					var m=String(file).match(/(?:^|\/)(hls\.js|flv\.js|mpegts\.js|language)\/([^/?#]+)(?:[?#].*)?$/i);
+					if(cdn && cdn.indexOf('1.1.11')===-1 && m){
 						if(cdn.slice(-1)!=='/'){
 							cdn+='/';
 						}
@@ -7810,18 +7801,38 @@
 		}
 		
 	}
+	/*
+	 * isUnreliablePluginBase
+	 * 功能：识别不会托管 hls.js/flv.js 的目录，避免 Vite/Webpack 下请求 /src/hls.js 等 404
+	*/
+	function isUnreliablePluginBase(base) {
+		if (!base || typeof base !== 'string') {
+			return true;
+		}
+		var b = base.replace(/\\/g, '/');
+		// bundler 产物 / 依赖预构建目录
+		if (/\/(?:assets|\.vite\/deps|_next\/static|chunks?|static\/js|webpack|@fs|@id|@vite)\/?$/i.test(b)) {
+			return true;
+		}
+		// 应用源码根（Vite 常见：…/src/main.js → 误推 …/src/hls.js/…）
+		if (/\/(?:src|app|pages|views|components)\/?$/i.test(b)) {
+			return true;
+		}
+		// 仅站点根路径，不含插件文件
+		if (/^https?:\/\/[^/?#]+\/?$/i.test(b)) {
+			return true;
+		}
+		return false;
+	}
 	/*
 	 * getPath
 	 * 功能：获取该js文件所在路径
+	 * 仅信任 ckplayer 脚本或可信的 ckplayerBasePath；勿回退到页面最后一个 script（Vite 常为 /src/main.js）
 	*/
 	function getPath(siz) {
 		if (typeof window !== 'undefined' && window.ckplayerBasePath) {
 			var base = window.ckplayerBasePath;
-			// bundler chunk 目录不含插件文件，忽略并继续 script/CDN 推导
-			if (/\/(?:assets|\.vite\/deps|_next\/static|chunks?)\/?$/i.test(base)) {
-				base = '';
-			}
-			if (base) {
+			if (!isUnreliablePluginBase(base)) {
 				if (base.slice(-1) !== '/') {
 					base += '/';
 				}
@@ -7831,13 +7842,17 @@
 				return base;
 			}
 		}
-		var scriptList = document.scripts || [],
-			thisPath = scriptList.length ? scriptList[scriptList.length - 1].src : '';
+		var scriptList = document.scripts || [];
+		var thisPath = '';
 		for (var i = 0; i < scriptList.length; i++) {
 			var scriptName = scriptList[i].getAttribute('name') || scriptList[i].getAttribute('data-name');
-			var src = scriptList[i].src.slice(scriptList[i].src.lastIndexOf('/') + 1, scriptList[i].src.lastIndexOf('.'));
-			if ((scriptName && (scriptName == 'ckplayer' || scriptName == 'ckplayer.min' || scriptName == 'ckplayer-plus')) || (scriptList[i].src && (src == 'ckplayer' || src == 'ckplayer.min' || src.indexOf('ckplayer') === 0))) {
-				thisPath = scriptList[i].src;
+			var srcFull = scriptList[i].src || '';
+			if (!srcFull) {
+				continue;
+			}
+			var src = srcFull.slice(srcFull.lastIndexOf('/') + 1, srcFull.lastIndexOf('.'));
+			if ((scriptName && (scriptName == 'ckplayer' || scriptName == 'ckplayer.min' || scriptName == 'ckplayer-plus')) || (src == 'ckplayer' || src == 'ckplayer.min' || src.indexOf('ckplayer') === 0)) {
+				thisPath = srcFull;
 				break;
 			}
 		}
@@ -7847,6 +7862,9 @@
 		} else if (thisPath && thisPath.lastIndexOf('/') > -1) {
 			path = thisPath.substring(0, thisPath.lastIndexOf('/') + 1);
 		}
+		if (!path || isUnreliablePluginBase(path)) {
+			return '';
+		}
 		if (!isUndefined(siz)) {
 			path += siz + '/';
 		}