tencent.jquery.pix.component 1.0.78 → 1.0.79
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/video/videoplayer.js +61 -17
- package/package.json +1 -1
|
@@ -3,8 +3,9 @@ import './videocss.scss';
|
|
|
3
3
|
import VideoHTML from "./videohtml";
|
|
4
4
|
|
|
5
5
|
/**
|
|
6
|
-
* @typedef {"play" | "pause" | "stop" | "enterFullScreen" | "exitFullScreen"} VideoPlayerState
|
|
6
|
+
* @typedef {"play" | "pause" | "stop" | "enterFullScreen" | "exitFullScreen" | "ready"} VideoPlayerState
|
|
7
7
|
* 视频播放器状态
|
|
8
|
+
* - ready: 播放器初始化完成，已就绪
|
|
8
9
|
*/
|
|
9
10
|
|
|
10
11
|
/**
|
|
@@ -23,13 +24,69 @@ import VideoHTML from "./videohtml";
|
|
|
23
24
|
* @param {boolean} [options.showProgressHandle=true] 是否显示进度条滑块
|
|
24
25
|
* @param {boolean} [options.clickToPause=false] 点击播放区域是否直接暂停，true: 直接暂停，false: 先展示控制条
|
|
25
26
|
* @param {(this: VideoPlayer, type: VideoPlayerState) => any} [options.stateChanged] 状态变化回调
|
|
27
|
+
*
|
|
28
|
+
* @property {boolean} ready - 播放器是否已就绪
|
|
29
|
+
* @property {Promise<VideoPlayer>} readyPromise - 初始化完成的 Promise，resolve 时返回播放器实例
|
|
30
|
+
*
|
|
31
|
+
* @example
|
|
32
|
+
* // 方式 1: 使用 Promise（推荐用于需要确保初始化完成的场景）
|
|
33
|
+
* const player = new VideoPlayer({ container: '#video', vid: 'xxx' });
|
|
34
|
+
* await player.readyPromise;
|
|
35
|
+
* player.play();
|
|
36
|
+
*
|
|
37
|
+
* @example
|
|
38
|
+
* // 方式 2: 使用 stateChanged 回调
|
|
39
|
+
* const player = new VideoPlayer({
|
|
40
|
+
* container: '#video',
|
|
41
|
+
* vid: 'xxx',
|
|
42
|
+
* stateChanged(state) {
|
|
43
|
+
* if (state === 'ready') {
|
|
44
|
+
* console.log('Player is ready!');
|
|
45
|
+
* this.play();
|
|
46
|
+
* }
|
|
47
|
+
* }
|
|
48
|
+
* });
|
|
49
|
+
*
|
|
50
|
+
* @example
|
|
51
|
+
* // 方式 3: 不等待，直接使用（兼容旧代码，但可能在初始化未完成时调用失败）
|
|
52
|
+
* const player = new VideoPlayer({ container: '#video', vid: 'xxx' });
|
|
53
|
+
* player.play(); // ⚠️ 可能在 init 完成前执行
|
|
26
54
|
*/
|
|
27
55
|
export function VideoPlayer(options) {
|
|
28
56
|
this.options = options
|
|
29
57
|
if (typeof this.options.stateChanged !== 'function') {
|
|
30
58
|
this.options.stateChanged = () => { };
|
|
31
59
|
}
|
|
32
|
-
|
|
60
|
+
|
|
61
|
+
// 初始化 state，避免在 init 完成前调用其他方法时 state 为 undefined
|
|
62
|
+
this.state = {
|
|
63
|
+
playing: false,
|
|
64
|
+
controlsVisible: false,
|
|
65
|
+
updatingProgress: false,
|
|
66
|
+
controlsDelayStart: 0,
|
|
67
|
+
firstPlay: true,
|
|
68
|
+
isFullScreen: false,
|
|
69
|
+
originalParent: null, // 保存原始父容器引用
|
|
70
|
+
originalNextSibling: null, // 保存原始位置的下一个兄弟节点
|
|
71
|
+
volume: 50,
|
|
72
|
+
volumePanelVisible: false,
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
// 初始化就绪状态
|
|
76
|
+
this.ready = false;
|
|
77
|
+
|
|
78
|
+
// 创建 readyPromise，包装 init() 调用
|
|
79
|
+
this.readyPromise = this.init()
|
|
80
|
+
.then(() => {
|
|
81
|
+
this.ready = true;
|
|
82
|
+
// 通过 stateChanged 触发 'ready' 事件
|
|
83
|
+
this.options.stateChanged.call(this, 'ready');
|
|
84
|
+
return this; // 返回实例本身，方便链式调用
|
|
85
|
+
})
|
|
86
|
+
.catch(err => {
|
|
87
|
+
console.error('VideoPlayer initialization failed:', err);
|
|
88
|
+
throw err; // 重新抛出，让外部可以捕获
|
|
89
|
+
});
|
|
33
90
|
}
|
|
34
91
|
|
|
35
92
|
VideoPlayer.prototype.init = async function () {
|
|
@@ -74,17 +131,6 @@ VideoPlayer.prototype.init = async function () {
|
|
|
74
131
|
}
|
|
75
132
|
$container.find('.myplayer-video-mask').before(`<video src="${videoURL}"></video>`);
|
|
76
133
|
|
|
77
|
-
this.state = {
|
|
78
|
-
playing: false,
|
|
79
|
-
controlsVisible: false,
|
|
80
|
-
updatingProgress: false,
|
|
81
|
-
controlsDelayStart: 0,
|
|
82
|
-
firstPlay: true,
|
|
83
|
-
isFullScreen: false,
|
|
84
|
-
originalParent: null, // 保存原始父容器引用
|
|
85
|
-
originalNextSibling: null, // 保存原始位置的下一个兄弟节点
|
|
86
|
-
}
|
|
87
|
-
|
|
88
134
|
// 根据showProgressBar选项控制进度条显示
|
|
89
135
|
if (!this.options.showProgressBar) {
|
|
90
136
|
$container.find('.myplayer-progress').hide();
|
|
@@ -98,10 +144,8 @@ VideoPlayer.prototype.init = async function () {
|
|
|
98
144
|
// 根据showVolumeControl选项控制音量控件显示
|
|
99
145
|
if (this.options.showVolumeControl) {
|
|
100
146
|
$container.find('.myplayer-volume').show();
|
|
101
|
-
//
|
|
102
|
-
this.state.volume
|
|
103
|
-
this.state.volumePanelVisible = false;
|
|
104
|
-
this.updateVolumeDisplay(50);
|
|
147
|
+
// 更新音量显示
|
|
148
|
+
this.updateVolumeDisplay(this.state.volume);
|
|
105
149
|
} else {
|
|
106
150
|
$container.find('.myplayer-volume').hide();
|
|
107
151
|
}
|