@brandbrigade/ott-bb-player 1.0.0 → 1.0.2

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 (5) hide show
  1. package/README.md +34 -0
  2. package/js/OTTPlayer.prod.js +1 -1
  3. package/package.json +1 -1
  4. package/sample.html +180 -0
  5. package/wmc_new.prod.js +1 -0
package/sample.html ADDED
@@ -0,0 +1,180 @@
1
+ <!DOCTYPE html>
2
+ <script type="text/javascript">
3
+ var globalConfig = {
4
+ url:"https://injecto-streams.s3-accelerate.amazonaws.com/hls_fileTest_tmp/index_test.m3u8",
5
+ gameId:"arena_nba_BB_test_Lakers_long",
6
+ channel:"nba"
7
+ };
8
+ </script>
9
+ <html lang="en">
10
+ <head>
11
+ <meta charset="UTF-8">
12
+ <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
13
+ <meta http-equiv="Pragma" content="no-cache" />
14
+ <meta http-equiv="Expires" content="0" />
15
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
16
+ <title>MK Player & BB OTT</title>
17
+
18
+ <script src="wmc_new.prod.js"></script>
19
+ <script src="js/OTTPlayer.prod.js"></script>
20
+
21
+ <style>
22
+ body {
23
+ margin: 0;
24
+ }
25
+
26
+ #player_container {
27
+ width: 100%;
28
+ height: 100%;
29
+ }
30
+
31
+ #player_container > * {
32
+ position: absolute;
33
+ text-align: center;
34
+ width: 100%;
35
+ }
36
+ </style>
37
+ </head>
38
+ <body>
39
+ <br/>
40
+ <br/>
41
+ <button id="toggleBtn" onclick="toggleBBPlayer()">Toggle ott player OFF</button>
42
+ <br/>
43
+ <div id="debugText2"></div>
44
+ <div id="player_container">
45
+ <video id="video_element" poster="" crossOrigin controls></video>
46
+ </div>
47
+ <canvas id="canvas" style="display: none;"></canvas>
48
+ <script type="text/javascript">
49
+ const video = document.getElementById("video_element");
50
+ const wmcEvents = amc.AmcEvents;
51
+ const wmcConstants = amc.AmcConstants;
52
+
53
+ // MK STUF
54
+ let config = {
55
+ server_url: "https://ottapp-appgw-amp-a.proda.nba.tv3cloud.com",
56
+ owner_Uid: "azuki",
57
+ playback_mode: wmcConstants.IMC_MODE_LIVE,
58
+ media_id: "NBATVD",
59
+ app_id: "1023",
60
+ authorization_token: "AuthToken1jZHLbtswEEW_xtpJIIcPkQstVDd1giIIkCbZ8zGK2ciSS1Jx3K8v7SYtULRFAGI4uLx3BjjsFx9wcthtc96nFetX8KmciOMxTI97E_Ox2cfZm2aypsnPzI3z4hs374qrukppwfhHNuX0n8jJ-9vqtrgzqXnZjWk2-2aOj0U9pFKAEFGucwkepxzysbRuNGF3ep_MDrsl1URb4_1AaiqFqbkgulbck9qAG1qrEVrPqjuczJSvfOdxMMuYq34c5wP6Nz39erhPGIvvvYN75-blPJmZ1hoErIW1vOa-bWutBdZKAPHOusERrD7-3PK65F2Rv_LaBRfnNA_5leobMXUiJv9BLM4jdmmxycVgMVb9krdzDN9NDvN0bdJTR4WmnHEmpKCU0RYEV7oFYFRzIrUCKZViQLnQUoEQVFCQWiiilRQEKDANjBPKSi9a4KBEgdeCqi5e9iFiupk6KjUIDYrQah3RZPRnUemyukSrz3jcLKH8lLUeEHntiLcFDkCtvSW1ciAtmJLgorq87tdfLnsQsrsPcRzaFVjycF9q6A9rnOD29oF_fVabp-WuiBf98uFmO_TfNn0xMf8D"
61
+ }
62
+ let bbPlayer = null;
63
+ let fps = 0;
64
+
65
+
66
+
67
+ function processEvent(eventObj) {
68
+ switch (eventObj.eventType) {
69
+ case wmcEvents.AMC_EVENT_METRICS_UPDATE:
70
+ console.log("AMC_EVENT_METRICS_UPDATE");
71
+ break;
72
+ case wmcEvents.AMC_EVENT_PLAYER_SEGMENT_PLAYBACK:
73
+
74
+ if (typeof eventObj.mediaInfo.frameRate != "undefined"){
75
+ console.log("FPS=", eventObj.mediaInfo.frameRate );
76
+ if(bbPlayer)
77
+ {
78
+ bbPlayer.SetFps(eventObj.mediaInfo.frameRate);
79
+ }
80
+ }
81
+ break;
82
+
83
+ case wmcEvents.AMC_EVENT_PLAY_READY:
84
+ wmcMgr.setContainer(video);
85
+ wmcMgr.start();
86
+ // init injecto OTT player
87
+ bbPlayer = new BB.OTTPlayer(video /*video tag */,30000/1001 /* frame rate */,wmcMgr,{
88
+ gameId:globalConfig.gameId,
89
+ augmentation:{
90
+ channelName: globalConfig.channel,
91
+ renderTimecode:false
92
+ }
93
+ });
94
+ //bbPlayer.Toggle(true/false)// to enable/disable - sample below
95
+ break;
96
+ case wmcEvents.AMC_EVENT_PLAYER_METADATA:
97
+
98
+ break;
99
+ case wmcEvents.AMC_EVENT_PLAYER_METADATA_PARSED:
100
+ //console.info("AMC_EVENT_PLAYER_METADATA_PARSED",eventObj);
101
+ break;
102
+ case wmcEvents.AMC_EVENT_DEVICE_REGISTERED:
103
+ break;
104
+ case wmcEvents.AMC_EVENT_INIT_COMPLETE:
105
+ // start the VOD/LIVE playback
106
+ wmcMgr.createPlayer(config.playback_mode, config.media_id, config.app_id);
107
+
108
+ break;
109
+ case wmcEvents.AMC_EVENT_ERROR:
110
+ console.error(eventObj.code + ":" + ((eventObj.message) ? eventObj.message : eventObj.message.error));
111
+ break;
112
+ default:
113
+ }
114
+ }
115
+
116
+ const wmcMgr = new amc.AmcManager(config.server_url, config.owner_Uid);
117
+ wmcMgr.setSTSToken(config.authorization_token);
118
+ wmcMgr.setLogLevel(wmcConstants.IMC_LOG_DEBUG);
119
+
120
+
121
+ function onPlaybackControlBlock(eventObj) {
122
+ playBackControlRestrictions = (eventObj && eventObj.hasOwnProperty("controlRestrictions")) ? eventObj.controlRestrictions : [];
123
+ if (!playBackControlRestrictions.length) {
124
+ return;
125
+ }
126
+ blockControls();
127
+ }
128
+
129
+ wmcMgr.setNativeHlsParsing(true);
130
+ wmcMgr.addEventListener(wmcEvents.AMC_EVENT_PROGRAM_RESTRICTIONS, onPlaybackControlBlock);
131
+
132
+ wmcMgr.addEventListener(wmcEvents.AMC_EVENT_PROGRAM_CHANGED, processEvent);
133
+ // other optional events
134
+ wmcMgr.addEventListener(wmcEvents.AMC_EVENT_BIT_RATE_CHANGED, processEvent);
135
+ wmcMgr.addEventListener(wmcEvents.AMC_EVENT_AD_STARTED, processEvent);
136
+ wmcMgr.addEventListener(wmcEvents.AMC_EVENT_AD_QUARTILE, processEvent);
137
+ wmcMgr.addEventListener(wmcEvents.AMC_EVENT_AD_FINISHED, processEvent);
138
+ wmcMgr.addEventListener(wmcEvents.AMC_EVENT_AD_BREAK_START, processEvent);
139
+ wmcMgr.addEventListener(wmcEvents.AMC_EVENT_AD_BREAK_END, processEvent);
140
+ wmcMgr.addEventListener(wmcEvents.AMC_EVENT_TEXT_TRACKS_CHANGED, processEvent);
141
+ wmcMgr.addEventListener(wmcEvents.AMC_EVENT_TEXT_TRACKS_ADDED, processEvent);
142
+ wmcMgr.addEventListener(wmcEvents.AMC_EVENT_AUDIO_TRACKS_CHANGED, processEvent);
143
+ wmcMgr.addEventListener(wmcEvents.AMC_EVENT_PERIOD_SWITCH, processEvent);
144
+ wmcMgr.addEventListener(wmcEvents.AMC_EVENT_PERIOD_SWITCHED, processEvent);
145
+ wmcMgr.addEventListener(wmcEvents.AMC_EVENT_AD_MARKER_DATA, processEvent);
146
+ wmcMgr.addEventListener(wmcEvents.AMC_EVENT_PLAYOUT_METRIC_UPDATE, processEvent);
147
+ wmcMgr.addEventListener(wmcEvents.BEACON_FAIL_OPEN_STATUS, processEvent);
148
+ wmcMgr.addEventListener(wmcEvents.AMC_EVENT_PROGRAM_QUERY_STATUS, processEvent);
149
+ wmcMgr.addEventListener(wmcEvents.AMC_EVENT_VIDEO_QUALITY_CHANGED, processEvent);
150
+ wmcMgr.addEventListener(wmcEvents.AMC_EVENT_PROFILING, processEvent);
151
+
152
+ wmcMgr.addEventListener(wmcEvents.AMC_EVENT_PLAYER_SEGMENT_PLAYBACK, processEvent);
153
+
154
+ wmcMgr.addEventListener(wmcEvents.AMC_EVENT_ERROR, processEvent);
155
+ wmcMgr.addEventListener(wmcEvents.AMC_EVENT_STATE_CHANGED, processEvent);
156
+ wmcMgr.addEventListener(wmcEvents.AMC_EVENT_VIDEO_POSITION_CHANGED, processEvent);
157
+ wmcMgr.addEventListener(wmcEvents.AMC_EVENT_SEEK_COMPLETE, processEvent);
158
+ wmcMgr.addEventListener(wmcEvents.AMC_EVENT_DEVICE_REGISTERED, processEvent);
159
+ wmcMgr.addEventListener(wmcEvents.AMC_EVENT_INIT_COMPLETE, processEvent);
160
+ wmcMgr.addEventListener(wmcEvents.AMC_EVENT_PLAY_READY, processEvent);
161
+ wmcMgr.addEventListener(wmcEvents.AMC_EVENT_PRELOAD_COMPLETE, processEvent);
162
+ wmcMgr.addEventListener(wmcEvents.AMC_EVENT_PLAYER_METADATA, processEvent);
163
+ wmcMgr.addEventListener(wmcEvents.AMC_EVENT_PLAYER_METADATA_PARSED, processEvent);
164
+ wmcMgr.addEventListener(wmcEvents.AMC_EVENT_METRICS_UPDATE, processEvent);
165
+ wmcMgr.setPlayerKey("60a31c68-c920-42be-a74a-506d51df7233");
166
+ wmcMgr.setExternalSourceParams({ sourceUrl: globalConfig.url, licenseUrl: "" });
167
+ wmcMgr.init();
168
+ const toggleBtn = document.getElementById("toggleBtn");
169
+ function toggleBBPlayer()
170
+ {
171
+ if(bbPlayer)
172
+ {
173
+ bbPlayer.Toggle(!bbPlayer.options.enabled);
174
+ toggleBtn.innerText = "Toggle ott player " + (bbPlayer.options.enabled ? "OFF" : "ON");
175
+ }
176
+ }
177
+ </script>
178
+ </body>
179
+
180
+ </html>