@brandbrigade/ott-bb-player 1.0.0 → 1.0.1
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/js/OTTPlayer.prod.js +1 -1
- package/package.json +1 -1
- package/sample.html +180 -0
- 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>
|