@hopecloud/jetstream-player 0.2.9 → 0.3.0
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.
|
@@ -15,20 +15,20 @@ If you want to use the library in your project, you need to perform the followin
|
|
|
15
15
|
|
|
16
16
|
Jetstrem player API can be installed in an existing project via npm.
|
|
17
17
|
|
|
18
|
-
```
|
|
18
|
+
```js
|
|
19
19
|
npm i @hopecloud/jetstream-player
|
|
20
20
|
```
|
|
21
21
|
|
|
22
22
|
Once installed, you will be able to import `JetstreamPlayer` clas from the library into your component
|
|
23
23
|
|
|
24
|
-
```
|
|
24
|
+
```js
|
|
25
25
|
import { JetstreamPlayer } from '@hopecloud/jetstream-player';
|
|
26
26
|
```
|
|
27
27
|
|
|
28
28
|
Inside of `JetstreamPlayer` class there are methods `play`, `pause`, etc.
|
|
29
29
|
You can find all available [methods](../usage/player-methods) and [events](../usage/player-events) in the following sections.
|
|
30
30
|
|
|
31
|
-
```
|
|
31
|
+
```js
|
|
32
32
|
class JetstreamPlayer {
|
|
33
33
|
iframe;
|
|
34
34
|
constructor(selector) {
|
|
@@ -52,7 +52,7 @@ In order to connect our iframe with `JetstreamPlayer` class, we need determines
|
|
|
52
52
|
|
|
53
53
|
For example `id="iframe1"`, `id="iframe2"`
|
|
54
54
|
|
|
55
|
-
```
|
|
55
|
+
```js
|
|
56
56
|
<div style="display: block; position:relative; max-width: 100%; width: 100%;">
|
|
57
57
|
<div style="padding-top: 56.25%;">
|
|
58
58
|
<iframe
|
|
@@ -68,7 +68,7 @@ For example `id="iframe1"`, `id="iframe2"`
|
|
|
68
68
|
|
|
69
69
|
Since the iframe already has the specified `id`, we can create a variable _(array of variables)_ to bind the `JetstreamPlayer` with our iframe.
|
|
70
70
|
|
|
71
|
-
```
|
|
71
|
+
```js
|
|
72
72
|
let player: JetstreamPlayer | null;
|
|
73
73
|
|
|
74
74
|
player = new JetstreamPlayer('#iframe1');
|
|
@@ -78,7 +78,7 @@ player = new JetstreamPlayer('#iframe1');
|
|
|
78
78
|
|
|
79
79
|
Initialization must occur when all DOM elements are loaded. Therefore, in our [Vue.js example](https://stackblitz.com/edit/hcc-jetstream-player-demo?file=src%2Fcomponents%2FVideoSandbox.vue), we initialize our players inside the [onMounted](https://vuejs.org/api/composition-api-lifecycle.html#onmounted) lifecycle hook. Thus the player is initialized when template is fully loaded.
|
|
80
80
|
|
|
81
|
-
```
|
|
81
|
+
```js
|
|
82
82
|
onMounted(() => {
|
|
83
83
|
player = new JetstreamPlayer('#iframe1');
|
|
84
84
|
});
|
|
@@ -86,7 +86,7 @@ onMounted(() => {
|
|
|
86
86
|
|
|
87
87
|
After that, we can access the `player` variable and call the methods available in the `JetstreamPlayer` class.
|
|
88
88
|
|
|
89
|
-
```
|
|
89
|
+
```js
|
|
90
90
|
setup() {
|
|
91
91
|
let player: JetstreamPlayer | null;
|
|
92
92
|
|
|
@@ -12,7 +12,7 @@ This list is not exhaustive. New events can be added as needed.
|
|
|
12
12
|
|
|
13
13
|
In order to use these events, it is enough to import `JetstreamPlayer` class which contains these methods.
|
|
14
14
|
|
|
15
|
-
```
|
|
15
|
+
```js
|
|
16
16
|
import { JetstreamPlayer } from '@hopecloud/jetstream-player';
|
|
17
17
|
|
|
18
18
|
setup() {
|
|
@@ -43,7 +43,7 @@ This event is called when a video or a video in a playlist ends. For example, if
|
|
|
43
43
|
|
|
44
44
|
### Example of use:
|
|
45
45
|
|
|
46
|
-
```
|
|
46
|
+
```js
|
|
47
47
|
import { JetstreamPlayer } from '@hopecloud/jetstream-player';
|
|
48
48
|
|
|
49
49
|
setup() {
|
|
@@ -66,7 +66,7 @@ This event is a listener that fires when any video or playlist on your page star
|
|
|
66
66
|
|
|
67
67
|
### Example of use:
|
|
68
68
|
|
|
69
|
-
```
|
|
69
|
+
```js
|
|
70
70
|
import { JetstreamPlayer } from '@hopecloud/jetstream-player';
|
|
71
71
|
|
|
72
72
|
setup() {
|
|
@@ -89,7 +89,7 @@ This event is a listener that fires when any video or playlist on your page paus
|
|
|
89
89
|
|
|
90
90
|
### Example of use:
|
|
91
91
|
|
|
92
|
-
```
|
|
92
|
+
```js
|
|
93
93
|
import { JetstreamPlayer } from '@hopecloud/jetstream-player';
|
|
94
94
|
|
|
95
95
|
setup() {
|
|
@@ -14,7 +14,7 @@ This list is not exhaustive. New methods can be added to the library as needed.
|
|
|
14
14
|
|
|
15
15
|
In order to use these methods, it is enough to import the `JetstreamPlayer` class and call them as described in the previous section.
|
|
16
16
|
|
|
17
|
-
```
|
|
17
|
+
```js
|
|
18
18
|
import { JetstreamPlayer } from '@hopecloud/jetstream-player';
|
|
19
19
|
|
|
20
20
|
setup() {
|
|
@@ -64,7 +64,7 @@ The player will advance to that time if the player has already downloaded the po
|
|
|
64
64
|
The specified time must be shorter than video duration. If the user sets a time that exceeds video duration, nothing will happen.
|
|
65
65
|
|
|
66
66
|
|
|
67
|
-
```
|
|
67
|
+
```js
|
|
68
68
|
import { JetstreamPlayer } from '@hopecloud/jetstream-player';
|
|
69
69
|
|
|
70
70
|
setup() {
|
|
@@ -89,7 +89,7 @@ setup() {
|
|
|
89
89
|
The `playNext` or `playPrevious` method can be called only for a **playlist**. Calling these methods for a simple video will do nothing.
|
|
90
90
|
We are able to interact with playlist programmatically in the same way as pressing `playNext` or `playPrevious` within the playlist itself.
|
|
91
91
|
|
|
92
|
-
```
|
|
92
|
+
```js
|
|
93
93
|
import { JetstreamPlayer } from '@hopecloud/jetstream-player';
|
|
94
94
|
|
|
95
95
|
setup() {
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
|
|
5
5
|
We can embed one or more windows with our player on web page. If the iframe is one, then the use is very simple. As shown in the previous chapter, this can be done as follows
|
|
6
6
|
|
|
7
|
-
```
|
|
7
|
+
```js
|
|
8
8
|
import { JetstreamPlayer } from '@hopecloud/jetstream-player';
|
|
9
9
|
|
|
10
10
|
setup() {
|
|
@@ -32,7 +32,7 @@ setup() {
|
|
|
32
32
|
If we have many iframes, there is no need to create a separate variable for each player.
|
|
33
33
|
#### Example of non-recommended use ⬇️
|
|
34
34
|
|
|
35
|
-
```
|
|
35
|
+
```js
|
|
36
36
|
import { JetstreamPlayer } from '@hopecloud/jetstream-player';
|
|
37
37
|
|
|
38
38
|
setup() {
|
|
@@ -67,7 +67,7 @@ All we need is to create an empty array `const players = [];` and push each play
|
|
|
67
67
|
|
|
68
68
|
### Example
|
|
69
69
|
|
|
70
|
-
```
|
|
70
|
+
```js
|
|
71
71
|
import { JetstreamPlayer } from '@hopecloud/jetstream-player';
|
|
72
72
|
|
|
73
73
|
setup() {
|