@brandbrigade/ott-bb-player 1.0.12 → 1.0.14

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.
Files changed (4) hide show
  1. package/README.md +6 -0
  2. package/js/OTTPlayer.prod.js +1 -1
  3. package/package.json +1 -1
  4. package/sample.html +88 -76
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@brandbrigade/ott-bb-player",
3
- "version": "1.0.12",
3
+ "version": "1.0.14",
4
4
  "description": "ott bb player",
5
5
  "main": "OTTPlayer.prod.js",
6
6
  "directories": {
package/sample.html CHANGED
@@ -1,10 +1,10 @@
1
1
  <!DOCTYPE html>
2
2
  <script type="text/javascript">
3
- // var globalConfig = {
4
- // url:"https://nbablpng.akamaized.net/live/hls-itc/bbtest45/v1-121.m3u8?stSecret=rj12sw543terw32422334swees", //Prod (from Eb) stream, V1 only
5
- // channel:"nba",
6
- // MKsync: "yes"
7
- // };
3
+ var globalConfig = {
4
+ url:"https://nbablpng.akamaized.net/live/hls-itc/bbtest45/v1-121.m3u8?stSecret=rj12sw543terw32422334swees", //Prod (from Eb) stream, V1 only
5
+ channel:"nba",
6
+ MKsync: "yes"
7
+ };
8
8
 
9
9
  </script>
10
10
  <html lang="en">
@@ -18,28 +18,45 @@
18
18
 
19
19
  <!--<script src="js/lib/wmc.prod.js"></script>-->
20
20
  <script src="wmc.prod.js"></script>
21
+ <!--<script src="https://wmc.mr.tv3cloud.com/nba/dist/wmc.prod.js"></script>-->
21
22
  <script src="js/OTTPlayer.prod.js"></script>
23
+ <!--<script src="js/ottplayer.prod.js"></script>-->
22
24
 
23
25
  <style>
24
- body {
25
- margin: 0;
26
- }
27
-
28
- #player_container {
29
- width: 80%;
30
- height: 100%;
31
- }
32
-
33
- #player_container > * {
34
- position: absolute;
35
- text-align: center;
36
- width: 80%;
37
- }
26
+ body {
27
+ margin: 0;
28
+ }
29
+
30
+ #player_container {
31
+ width: 100%;
32
+ height: 100%;
33
+ }
34
+
35
+ #player_container > * {
36
+ position: absolute;
37
+ text-align: center;
38
+ width: 100%;
39
+ }
38
40
  </style>
39
41
  </head>
40
42
  <body>
41
43
  <br/>
42
- <div id="personName"></div>
44
+ <input type="number" id="numberInput" value="1">
45
+
46
+
47
+ <input type="checkbox" id="plus05CorrectionCheckbox" name="plus05CorrectionCheckbox">
48
+ <!--<label for="plus05CorrectionCheckbox">plus05Correction (for 29.97 only):</label>-->
49
+
50
+ <input type="checkbox" id="doNotRenderAugmentationCheckbox" name="doNotRenderAugmentationCheckbox">
51
+ <!--<label for="doNotRenderAugmentationCheckbox">doNotRenderAugmentation:</label>-->
52
+
53
+ <br/>
54
+ <button id="toggleBtn" onclick="toggleBBPlayer()">Toggle ott player OFF</button>
55
+ <br/>
56
+
57
+ <div id="debugText"></div>
58
+ <div id="debugText2"></div>
59
+ <!--<div id="debugText3"></div> -->
43
60
  <div id="player_container">
44
61
  <video id="video_element" poster="" crossOrigin controls></video>
45
62
  </div>
@@ -50,10 +67,13 @@
50
67
 
51
68
  function doAllStuff()
52
69
  {
53
- const video = document.getElementById("video_element");
70
+ const video = document.getElementById("video_element");
54
71
  const wmcEvents = amc.AmcEvents;
55
72
  const wmcConstants = amc.AmcConstants;
56
73
 
74
+ //const canvas = document.getElementById('canvas');
75
+ //const ctx = canvas.getContext('2d');
76
+
57
77
  // MK STUF
58
78
  let config = {
59
79
  server_url: "https://ottapp-appgw-amp-a.proda.nba.tv3cloud.com",
@@ -63,6 +83,7 @@ function doAllStuff()
63
83
  app_id: "1023",
64
84
  authorization_token: "AuthToken1jZHLbtswEEW_xtpJIIcPkQstVDd1giIIkCbZ8zGK2ciSS1Jx3K8v7SYtULRFAGI4uLx3BjjsFx9wcthtc96nFetX8KmciOMxTI97E_Ox2cfZm2aypsnPzI3z4hs374qrukppwfhHNuX0n8jJ-9vqtrgzqXnZjWk2-2aOj0U9pFKAEFGucwkepxzysbRuNGF3ep_MDrsl1URb4_1AaiqFqbkgulbck9qAG1qrEVrPqjuczJSvfOdxMMuYq34c5wP6Nz39erhPGIvvvYN75-blPJmZ1hoErIW1vOa-bWutBdZKAPHOusERrD7-3PK65F2Rv_LaBRfnNA_5leobMXUiJv9BLM4jdmmxycVgMVb9krdzDN9NDvN0bdJTR4WmnHEmpKCU0RYEV7oFYFRzIrUCKZViQLnQUoEQVFCQWiiilRQEKDANjBPKSi9a4KBEgdeCqi5e9iFiupk6KjUIDYrQah3RZPRnUemyukSrz3jcLKH8lLUeEHntiLcFDkCtvSW1ciAtmJLgorq87tdfLnsQsrsPcRzaFVjycF9q6A9rnOD29oF_fVabp-WuiBf98uFmO_TfNn0xMf8D"
65
85
  }
86
+ //let bbPlayer = null;
66
87
  let fps = 0;
67
88
 
68
89
 
@@ -87,6 +108,16 @@ function doAllStuff()
87
108
  console.log("AMC_EVENT_METRICS_UPDATE");
88
109
  break;
89
110
  case wmcEvents.AMC_EVENT_PLAYER_SEGMENT_PLAYBACK:
111
+ let syncPoint = {frame:0,playerTime:0}
112
+ //bbPlayer.SetSyncPoint(syncPoint);
113
+
114
+ // if (typeof eventObj.mediaInfo.frameRate != "undefined"){
115
+ // console.log("FPS=", eventObj.mediaInfo.frameRate );
116
+ // if(bbPlayer)
117
+ // {
118
+ // bbPlayer.SetFps(eventObj.mediaInfo.frameRate);
119
+ // }
120
+ // }
90
121
  break;
91
122
 
92
123
  case wmcEvents.AMC_EVENT_PLAY_READY:
@@ -94,8 +125,7 @@ function doAllStuff()
94
125
 
95
126
 
96
127
  wmcMgr.setContainer(video);
97
- wmcMgr.start();
98
-
128
+ wmcMgr.start();
99
129
  break;
100
130
  case wmcEvents.AMC_EVENT_PLAYER_METADATA:
101
131
 
@@ -138,47 +168,27 @@ function onPlaybackControlBlock(eventObj) {
138
168
  wmcMgr.setNativeHlsParsing(true);
139
169
  wmcMgr.addEventListener(wmcEvents.AMC_EVENT_PROGRAM_RESTRICTIONS, onPlaybackControlBlock);
140
170
 
141
- //wmcMgr.addEventListener(wmcEvents.AMC_EVENT_INIT_COMPLETE, processEvent);
142
- //wmcMgr.addEventListener(wmcEvents.AMC_EVENT_DEVICE_REGISTERED, processEvent);
143
- //wmcMgr.addEventListener(wmcEvents.AMC_EVENT_PLAY_READY, processEvent);
144
- //wmcMgr.addEventListener(wmcEvents.AMC_EVENT_ERROR, processEvent);
145
- //wmcMgr.addEventListener(wmcEvents.AMC_EVENT_STATE_CHANGED, processEvent);
146
171
  wmcMgr.addEventListener(wmcEvents.AMC_EVENT_PROGRAM_CHANGED, processEvent);
147
- // other optional events
148
- //wmcMgr.addEventListener(wmcEvents.AMC_EVENT_SEEK_COMPLETE, processEvent);
149
- //wmcMgr.addEventListener(wmcEvents.AMC_EVENT_PRELOAD_COMPLETE, processEvent);
150
- //wmcMgr.addEventListener(wmcEvents.AMC_EVENT_VIDEO_POSITION_CHANGED, processEvent);
151
172
  wmcMgr.addEventListener(wmcEvents.AMC_EVENT_BIT_RATE_CHANGED, processEvent);
152
173
  wmcMgr.addEventListener(wmcEvents.AMC_EVENT_AD_STARTED, processEvent);
153
174
  wmcMgr.addEventListener(wmcEvents.AMC_EVENT_AD_QUARTILE, processEvent);
154
175
  wmcMgr.addEventListener(wmcEvents.AMC_EVENT_AD_FINISHED, processEvent);
155
176
  wmcMgr.addEventListener(wmcEvents.AMC_EVENT_AD_BREAK_START, processEvent);
156
177
  wmcMgr.addEventListener(wmcEvents.AMC_EVENT_AD_BREAK_END, processEvent);
157
- //wmcMgr.addEventListener(wmcEvents.AMC_EVENT_PLAYER_METADATA, processEvent);
158
- //wmcMgr.addEventListener(wmcEvents.AMC_EVENT_PLAYER_METADATA_PARSED, processEvent);
159
178
  wmcMgr.addEventListener(wmcEvents.AMC_EVENT_TEXT_TRACKS_CHANGED, processEvent);
160
179
  wmcMgr.addEventListener(wmcEvents.AMC_EVENT_TEXT_TRACKS_ADDED, processEvent);
161
180
  wmcMgr.addEventListener(wmcEvents.AMC_EVENT_AUDIO_TRACKS_CHANGED, processEvent);
162
181
  wmcMgr.addEventListener(wmcEvents.AMC_EVENT_PERIOD_SWITCH, processEvent);
163
182
  wmcMgr.addEventListener(wmcEvents.AMC_EVENT_PERIOD_SWITCHED, processEvent);
164
183
  wmcMgr.addEventListener(wmcEvents.AMC_EVENT_AD_MARKER_DATA, processEvent);
165
- //wmcMgr.addEventListener(wmcEvents.AMC_EVENT_METRICS_UPDATE, processEvent);
166
184
  wmcMgr.addEventListener(wmcEvents.AMC_EVENT_PLAYOUT_METRIC_UPDATE, processEvent);
167
185
  wmcMgr.addEventListener(wmcEvents.BEACON_FAIL_OPEN_STATUS, processEvent);
168
186
  wmcMgr.addEventListener(wmcEvents.AMC_EVENT_PROGRAM_QUERY_STATUS, processEvent);
169
187
  wmcMgr.addEventListener(wmcEvents.AMC_EVENT_VIDEO_QUALITY_CHANGED, processEvent);
170
188
  wmcMgr.addEventListener(wmcEvents.AMC_EVENT_PROFILING, processEvent);
171
- //wmcMgr.addEventListener(wmcEvents.AMC_EVENT_PLAYER_SEGMENT_PLAYBACK, processEvent);
172
-
173
-
174
-
175
-
176
-
177
-
178
189
  wmcMgr.addEventListener(wmcEvents.AMC_EVENT_PLAYER_SEGMENT_PLAYBACK, processEvent);
179
-
180
190
  wmcMgr.addEventListener(wmcEvents.AMC_EVENT_ERROR, processEvent);
181
- wmcMgr.addEventListener(wmcEvents.AMC_EVENT_STATE_CHANGED, processEventPlay);
191
+ wmcMgr.addEventListener(wmcEvents.AMC_EVENT_STATE_CHANGED, processEventPlay);
182
192
  wmcMgr.addEventListener(wmcEvents.AMC_EVENT_VIDEO_POSITION_CHANGED, processEvent);
183
193
  wmcMgr.addEventListener(wmcEvents.AMC_EVENT_SEEK_COMPLETE, processEvent);
184
194
  wmcMgr.addEventListener(wmcEvents.AMC_EVENT_DEVICE_REGISTERED, processEvent);
@@ -189,46 +199,48 @@ function onPlaybackControlBlock(eventObj) {
189
199
  wmcMgr.addEventListener(wmcEvents.AMC_EVENT_PLAYER_METADATA_PARSED, processEvent);
190
200
  wmcMgr.addEventListener(wmcEvents.AMC_EVENT_METRICS_UPDATE, processEvent);
191
201
  wmcMgr.setPlayerKey("60a31c68-c920-42be-a74a-506d51df7233");
192
- //prod
193
- //wmcMgr.setExternalSourceParams({ sourceUrl: "https://nbablpng.akamaized.net/live/hls-itc/bbtest45/v1-121.m3u8?stSecret=rj12sw543terw32422334swees", licenseUrl: "" });
194
- //dev
195
- wmcMgr.setExternalSourceParams({ sourceUrl: "https://nbablpng.akamaized.net/live/hls-itc/bbtestexternal/v1-121.m3u8?stSecret=rj12sw543terw32422334swees", licenseUrl: "" });
202
+ //wmcMgr.setExternalSourceParams({ sourceUrl: "https://nbablpng.akamaized.net/live/hls-itc/bbtest45/v1-121.m3u8?stSecret=rj12sw543terw32422334swees", licenseUrl: "" });
203
+ wmcMgr.setExternalSourceParams({ sourceUrl: globalConfig.url, licenseUrl: "" });
196
204
  wmcMgr.init();
197
205
  const toggleBtn = document.getElementById("toggleBtn");
198
-
206
+ function toggleBBPlayer()
207
+ {
208
+ // if(bbPlayer)
209
+ // {
210
+ // bbPlayer.Toggle(!bbPlayer.options.enabled);
211
+ // toggleBtn.innerText = "Toggle ott player " + (bbPlayer.options.enabled ? "OFF" : "ON");
212
+ // }
213
+ }
199
214
  }
200
215
 
201
216
  const URLParams = new URL(document.location);
202
- const CONFIG_NAME = URLParams.searchParams.get("config") || "";
203
-
204
- async function fetchConfig() {
205
- if (CONFIG_NAME !== "") {
206
- try {
207
- const response = await fetch(CONFIG_NAME);
208
- if (!response.ok) {
209
- throw new Error('Network response was not ok');
210
- }
211
- const configJson = await response.json();
212
- console.log("Got the following config: ", configJson);
213
- if (typeof globalConfig === 'undefined')
214
- globalConfig = {};
215
- globalConfig = Object.assign({}, globalConfig, configJson);
216
- doAllStuff();
217
-
218
- } catch (error) {
219
- console.error('Error fetching JSON:', error);
217
+ const CONFIG_NAME = URLParams.searchParams.get("config") || "";
218
+
219
+ async function fetchConfig() {
220
+ if (CONFIG_NAME !== "") {
221
+ try {
222
+ const response = await fetch(CONFIG_NAME);
223
+ if (!response.ok) {
224
+ throw new Error('Network response was not ok');
220
225
  }
221
- }
222
- else
223
- {
226
+ const configJson = await response.json();
227
+ console.log("Got the following config: ", configJson);
228
+ if (typeof globalConfig === 'undefined')
229
+ globalConfig = {};
230
+ globalConfig = Object.assign({}, globalConfig, configJson);
224
231
  doAllStuff();
232
+
233
+ } catch (error) {
234
+ console.error('Error fetching JSON:', error);
225
235
  }
226
- }
227
- fetchConfig(); // Call the async function to initiate the fetch operation
228
-
229
-
230
-
231
- </script>
236
+ }
237
+ else
238
+ {
239
+ doAllStuff();
240
+ }
241
+ }
242
+ fetchConfig(); // Call the async function to initiate the fetch operation
243
+ </script>
232
244
  </body>
233
245
 
234
246
  </html>