-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathHtml5SampleApplication.html
112 lines (91 loc) · 2.92 KB
/
Html5SampleApplication.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>NexPlayer · Mux</title>
<link rel="icon" href="https://i2.wp.com/html5.nexplayersdk.com/wp-content/uploads/2020/10/cropped-cropped-cropped-favicon3-1.png?fit=32%2C32&ssl=1" sizes="32x32">
<style type="text/css">
body {
background: #191828;
color: #efedef;
overflow: hidden;
}
#player_container {
position: relative;
padding-top: 28%;
padding-bottom: 28%;
left: 28%;
}
#player {
background-color: #191828;
position: absolute;
top: 0%;
width: 50%;
height: 50%;
}
#warning {
background-color: red;
text-align: center;
display: none;
}
</style>
<script src="https://src.litix.io/core/4/mux.js"></script>
</head>
<body>
<div id="player_container">
<div id="player" width="560" height="315"></div>
</div>
<script src="https://nexplayer.nexplayersdk.com/6.0.0/nexplayer.js"></script>
<script src="https://nexplayer.nexplayersdk.com/Mux/NexMuxHandShake.js"></script>
<script>
window.muxPlayerInitTime = Date.now();
var muxConfiguration = {
debug: true,
disableCookies: true,
respectDoNotTrack: true,
automaticErrorTracking: true,
data: {
env_key: 'ENV_KEY', // required
// Site Metadata
viewer_user_id: '', // ex: '12345'
experiment_name: '', // ex: 'player_test_A'
sub_property_id: '', // ex: 'cus-1'
// Player Metadata
player_name: 'NexPlayer', // ex: 'My Main Player'
player_version: '', // ex: '1.0.0'
player_init_time: window.muxPlayerInitTime, // ex: 1451606400000
// Video Metadata
video_id: '', // ex: 'abcd123'
video_title: '', // ex: 'My Great Video'
video_series: '', // ex: 'Weekly Great Videos'
video_duration: '', // in milliseconds, ex: 120000
video_stream_type: '', // 'live' or 'on-demand'
video_cdn: '' // ex: 'Fastly', 'Akamai'
},
};
var player = null;
var videoElem = null;
let nexMux = null;
var callBackWithPlayers = function (nexplayerInstance, videoElement) {
player = nexplayerInstance;
videoElem = videoElement;
videoElem.addEventListener("loadeddata", function() {
nexMux = new NexMuxHandShake();
nexMux.useAdMetrics = true;
nexMux.initMuxData(player, videoElem.id, muxConfiguration);
});
}
nexplayer.Setup({
key: 'YOUR NEXPLAYER KEY',
div: document.getElementById('player'),
callbacksForPlayer: callBackWithPlayers,
src: url,
autoplay: true, // Optional
mutedAtStart: true, // Optional
debug: true,// Optional
vast: 'https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/ad_rule_samples&ciu_szs=300x250&ad_rule=1&impl=s&gdfp_req=1&env=vp&output=vmap&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ar%3Dpremidpost&cmsid=496&vid=short_onecue&correlator=64565431654546',
});
</script>
</body>
</html>