@hopecloud/jetstream-player 0.3.3 → 0.3.4
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/dist/index.d.ts +1 -1
- package/docs/usage/player-events.md +45 -21
- package/docs/usage/player-methods.md +93 -22
- package/package.json +1 -1
package/dist/index.d.ts
CHANGED
|
@@ -5,8 +5,9 @@
|
|
|
5
5
|
### Next events are available in this version of the library:
|
|
6
6
|
|
|
7
7
|
- `onEnded()`
|
|
8
|
-
- `
|
|
9
|
-
- `
|
|
8
|
+
- `onPlayVideo()`
|
|
9
|
+
- `onPauseVideo()`
|
|
10
|
+
- `onVolumeChange()`
|
|
10
11
|
|
|
11
12
|
This list is not exhaustive. New events can be added as needed.
|
|
12
13
|
|
|
@@ -17,17 +18,17 @@ import { JetstreamPlayer } from '@hopecloud/jetstream-player';
|
|
|
17
18
|
|
|
18
19
|
setup() {
|
|
19
20
|
let player: JetstreamPlayer | null;
|
|
20
|
-
|
|
21
|
+
|
|
21
22
|
onMounted(() => {
|
|
22
23
|
player = new JetstreamPlayer('#iframe1');
|
|
23
|
-
|
|
24
|
+
|
|
24
25
|
player.onEnded(() => {
|
|
25
26
|
console.log('Video is ENDED');
|
|
26
|
-
})
|
|
27
|
-
|
|
27
|
+
});
|
|
28
|
+
|
|
28
29
|
...
|
|
29
|
-
})
|
|
30
|
-
}
|
|
30
|
+
});
|
|
31
|
+
},
|
|
31
32
|
```
|
|
32
33
|
|
|
33
34
|
### Pay attention ☝️⬇️
|
|
@@ -46,9 +47,9 @@ This event is called when a video or a video in a playlist ends. For example, if
|
|
|
46
47
|
```js
|
|
47
48
|
import { JetstreamPlayer } from '@hopecloud/jetstream-player';
|
|
48
49
|
|
|
49
|
-
setup() {
|
|
50
|
+
setup() {
|
|
50
51
|
const players = [];
|
|
51
|
-
|
|
52
|
+
|
|
52
53
|
onMounted(() => {
|
|
53
54
|
players.push(new JetstreamPlayer('#iframe1'));
|
|
54
55
|
players.push(new JetstreamPlayer('#iframe2'));
|
|
@@ -57,10 +58,10 @@ setup() {
|
|
|
57
58
|
console.log('Video 2 is ENDED');
|
|
58
59
|
});
|
|
59
60
|
});
|
|
60
|
-
}
|
|
61
|
+
},
|
|
61
62
|
```
|
|
62
63
|
|
|
63
|
-
## `
|
|
64
|
+
## `onPlayVideo()` event
|
|
64
65
|
|
|
65
66
|
This event is a listener that fires when any video or playlist on your page starts playing. If your page has one or more embedded iframes and a video starts playing in the first window, event will be triggered for first player.
|
|
66
67
|
|
|
@@ -69,21 +70,21 @@ This event is a listener that fires when any video or playlist on your page star
|
|
|
69
70
|
```js
|
|
70
71
|
import { JetstreamPlayer } from '@hopecloud/jetstream-player';
|
|
71
72
|
|
|
72
|
-
setup() {
|
|
73
|
+
setup() {
|
|
73
74
|
const players = [];
|
|
74
|
-
|
|
75
|
+
|
|
75
76
|
onMounted(() => {
|
|
76
77
|
players.push(new JetstreamPlayer('#iframe1'));
|
|
77
78
|
players.push(new JetstreamPlayer('#iframe2'));
|
|
78
79
|
|
|
79
|
-
players[0]?.
|
|
80
|
+
players[0]?.onPlayVideo(() => {
|
|
80
81
|
console.log('Video 1 is PLAYING');
|
|
81
82
|
});
|
|
82
83
|
});
|
|
83
|
-
}
|
|
84
|
+
},
|
|
84
85
|
```
|
|
85
86
|
|
|
86
|
-
## `
|
|
87
|
+
## `onPauseVideo()` event
|
|
87
88
|
|
|
88
89
|
This event is a listener that fires when any video or playlist on your page paused. If your page has one or more embedded iframes and a video paused in the second window, event will be triggered for second player.
|
|
89
90
|
|
|
@@ -92,16 +93,39 @@ This event is a listener that fires when any video or playlist on your page paus
|
|
|
92
93
|
```js
|
|
93
94
|
import { JetstreamPlayer } from '@hopecloud/jetstream-player';
|
|
94
95
|
|
|
95
|
-
setup() {
|
|
96
|
+
setup() {
|
|
96
97
|
const players = [];
|
|
97
|
-
|
|
98
|
+
|
|
98
99
|
onMounted(() => {
|
|
99
100
|
players.push(new JetstreamPlayer('#iframe1'));
|
|
100
101
|
players.push(new JetstreamPlayer('#iframe2'));
|
|
101
102
|
|
|
102
|
-
players[1]?.
|
|
103
|
+
players[1]?.onPauseVideo(() => {
|
|
103
104
|
console.log('Video 2 is PAUSED');
|
|
104
105
|
});
|
|
105
106
|
});
|
|
106
|
-
}
|
|
107
|
+
},
|
|
108
|
+
```
|
|
109
|
+
|
|
110
|
+
## `onVolumeChange()` event
|
|
111
|
+
|
|
112
|
+
This event is a listener that fires when any video or playlist on your page change volume. If your page has one or more embedded iframes and a video paused in the second window, event will be triggered for second player.
|
|
113
|
+
|
|
114
|
+
### Example of use:
|
|
115
|
+
|
|
116
|
+
```js
|
|
117
|
+
import { JetstreamPlayer } from '@hopecloud/jetstream-player';
|
|
118
|
+
|
|
119
|
+
setup() {
|
|
120
|
+
const players = [];
|
|
121
|
+
|
|
122
|
+
onMounted(() => {
|
|
123
|
+
players.push(new JetstreamPlayer('#iframe1'));
|
|
124
|
+
players.push(new JetstreamPlayer('#iframe2'));
|
|
125
|
+
|
|
126
|
+
players[1]?.onVolumeChange(() => {
|
|
127
|
+
console.log('Video 2 was changed volume');
|
|
128
|
+
});
|
|
129
|
+
});
|
|
130
|
+
},
|
|
107
131
|
```
|
|
@@ -7,7 +7,9 @@
|
|
|
7
7
|
- `play()`
|
|
8
8
|
- `pause()`
|
|
9
9
|
- `seekTo()`
|
|
10
|
-
- `
|
|
10
|
+
- `mute()`
|
|
11
|
+
- `unmute()`
|
|
12
|
+
- `isMuted()`
|
|
11
13
|
- `playPrevious()`
|
|
12
14
|
|
|
13
15
|
This list is not exhaustive. New methods can be added to the library as needed.
|
|
@@ -19,24 +21,24 @@ import { JetstreamPlayer } from '@hopecloud/jetstream-player';
|
|
|
19
21
|
|
|
20
22
|
setup() {
|
|
21
23
|
let player: JetstreamPlayer | null;
|
|
22
|
-
|
|
24
|
+
|
|
23
25
|
onMounted(() => {
|
|
24
26
|
player = new JetstreamPlayer('#iframe1');
|
|
25
|
-
})
|
|
27
|
+
});
|
|
26
28
|
|
|
27
29
|
const playVideo = () => {
|
|
28
30
|
player.play();
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
+
};
|
|
32
|
+
|
|
31
33
|
const pauseVideo = () => {
|
|
32
34
|
player.pause();
|
|
33
|
-
}
|
|
35
|
+
};
|
|
34
36
|
|
|
35
37
|
return {
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
}
|
|
39
|
-
}
|
|
38
|
+
playVideo,
|
|
39
|
+
pauseVideo,
|
|
40
|
+
};
|
|
41
|
+
},
|
|
40
42
|
```
|
|
41
43
|
|
|
42
44
|
## `play()` `pause()` methods
|
|
@@ -53,6 +55,75 @@ Modern browsers don't provide an opportunity to avoid this setting. Therefore, f
|
|
|
53
55
|
|
|
54
56
|
If the video or playlist has **sound settings off** `(muted)`, then all methods work in normal mode.
|
|
55
57
|
|
|
58
|
+
## `mute()` method
|
|
59
|
+
Mute function set media volume to silent.
|
|
60
|
+
|
|
61
|
+
```js
|
|
62
|
+
import { JetstreamPlayer } from '@hopecloud/jetstream-player';
|
|
63
|
+
|
|
64
|
+
setup() {
|
|
65
|
+
let player: JetstreamPlayer | null;
|
|
66
|
+
|
|
67
|
+
onMounted(() => {
|
|
68
|
+
player = new JetstreamPlayer('#iframe1');
|
|
69
|
+
});
|
|
70
|
+
|
|
71
|
+
const muteVideo = () => {
|
|
72
|
+
player.mute();
|
|
73
|
+
};
|
|
74
|
+
|
|
75
|
+
return {
|
|
76
|
+
muteVideo,
|
|
77
|
+
};
|
|
78
|
+
},
|
|
79
|
+
```
|
|
80
|
+
|
|
81
|
+
## `unmute()` method
|
|
82
|
+
Cancel volume mute.
|
|
83
|
+
|
|
84
|
+
```js
|
|
85
|
+
import { JetstreamPlayer } from '@hopecloud/jetstream-player';
|
|
86
|
+
|
|
87
|
+
setup() {
|
|
88
|
+
let player: JetstreamPlayer | null;
|
|
89
|
+
|
|
90
|
+
onMounted(() => {
|
|
91
|
+
player = new JetstreamPlayer('#iframe1');
|
|
92
|
+
});
|
|
93
|
+
|
|
94
|
+
const unmuteVideo = () => {
|
|
95
|
+
player.unmute();
|
|
96
|
+
};
|
|
97
|
+
|
|
98
|
+
return {
|
|
99
|
+
unmuteVideo,
|
|
100
|
+
};
|
|
101
|
+
},
|
|
102
|
+
```
|
|
103
|
+
|
|
104
|
+
## `isMuted()` method
|
|
105
|
+
Returns `true` if the player volume is muted, `false` if not.
|
|
106
|
+
|
|
107
|
+
```js
|
|
108
|
+
import { JetstreamPlayer } from '@hopecloud/jetstream-player';
|
|
109
|
+
|
|
110
|
+
setup() {
|
|
111
|
+
let player: JetstreamPlayer | null;
|
|
112
|
+
|
|
113
|
+
onMounted(() => {
|
|
114
|
+
player = new JetstreamPlayer('#iframe1');
|
|
115
|
+
});
|
|
116
|
+
|
|
117
|
+
const isMutedVideo = () => {
|
|
118
|
+
player.isMuted();
|
|
119
|
+
};
|
|
120
|
+
|
|
121
|
+
return {
|
|
122
|
+
isMutedVideo,
|
|
123
|
+
};
|
|
124
|
+
},
|
|
125
|
+
```
|
|
126
|
+
|
|
56
127
|
## `seekTo(seconds: Number)` method
|
|
57
128
|
|
|
58
129
|
Seeks to a specified time in the video. If the player is paused when the function is called, it will remain paused. If the function is called from another state (playing), the player will play the video.
|
|
@@ -69,19 +140,19 @@ import { JetstreamPlayer } from '@hopecloud/jetstream-player';
|
|
|
69
140
|
|
|
70
141
|
setup() {
|
|
71
142
|
let player: JetstreamPlayer | null;
|
|
72
|
-
|
|
143
|
+
|
|
73
144
|
onMounted(() => {
|
|
74
145
|
player = new JetstreamPlayer('#iframe1');
|
|
75
|
-
})
|
|
146
|
+
});
|
|
76
147
|
|
|
77
148
|
const seekTo = () => {
|
|
78
149
|
player.seekTo(45); // Set time on 45 second
|
|
79
|
-
}
|
|
150
|
+
};
|
|
80
151
|
|
|
81
152
|
return {
|
|
82
|
-
|
|
83
|
-
}
|
|
84
|
-
}
|
|
153
|
+
seekTo
|
|
154
|
+
};
|
|
155
|
+
},
|
|
85
156
|
```
|
|
86
157
|
|
|
87
158
|
## `playNext()` `playPrevious()` methods
|
|
@@ -94,10 +165,10 @@ import { JetstreamPlayer } from '@hopecloud/jetstream-player';
|
|
|
94
165
|
|
|
95
166
|
setup() {
|
|
96
167
|
let playlistPlayer: JetstreamPlayer | null;
|
|
97
|
-
|
|
168
|
+
|
|
98
169
|
onMounted(() => {
|
|
99
170
|
playlistPlayer = new JetstreamPlayer('#iframe1');
|
|
100
|
-
})
|
|
171
|
+
});
|
|
101
172
|
|
|
102
173
|
const playNextVideo = () => {
|
|
103
174
|
playlistPlayer.playNext();
|
|
@@ -108,8 +179,8 @@ setup() {
|
|
|
108
179
|
};
|
|
109
180
|
|
|
110
181
|
return {
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
}
|
|
114
|
-
}
|
|
182
|
+
playNextVideo,
|
|
183
|
+
playPreviousVideo,
|
|
184
|
+
};
|
|
185
|
+
}.
|
|
115
186
|
```
|