# Tutorial
# Ads
// Use configuration from the dashboard
// And custom ads:
var options = {
ads: [
{
time: 0, // preroll
link: [
"https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/",
"https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/other-1",
"https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/other-2"
]
},
{
time: 600, // 10 minutes
link: "https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/"
},
{
time: -1, // postroll
link: "https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/"
}
]
},
player.muted(true);
player.autoplay(true);
player.ima3(options);
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
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
// Only use configuration from the dashboard
1
// Only use configuration from the dashboard
1
// Not yet supported ads
1
// Not yet supported ads
1
# Autoplay
# Autoplay (ONLY for website)
Most mobile devices have blocked autoplaying videos until recently. For mobile devices that don't support autoplaying, autoplay isn't supported by Uiza Player. For those devices that support autoplaying, like iOS10 and Chrome for Android 53+, you must mute the video or have a video without audio tracks to be able to play it.
Safari 11 on macOS and iOS, as well as Chrome for Desktop (62+) and Mobile are going to introduce a new auto-play policy. The main goal is to improve their user’s browsing experience, by eliminating distractions and surprising media playbacks of unmuted content, and provide them with more control over the autoplay capabilities for individual websites. Additional options are available in the respective website preferences pane to allow or disable autoplay, disable audio in general or more. In addition to that, both browsers are going to introduce an automated approach, which decides if auto-play will be blocked for media elements with sound in general or if auto-play is disabled at all. For this devices that support autoplaying, you must mute the video or have a video without audio tracks to be able to play it.
# How to do it
Step 1: Set volume to muted
Step 2: Set autoplay to true
# Sample
player.muted(true);
player.autoplay(true);
1
2
2
// Full supported, no need to do anything
1
// Full supported, no need to do anything
1
// Full supported, no need to do anything
1
// Full supported, no need to do anything
1
# Custom UI
<!-- Use configuration from the dashboard -->
<!-- Custom by code: -->
<!DOCTYPE html>
<html>
<body>
<!-- Include UIZA library. -->
<script src='https://sdk.uiza.io/uizaplayer.js'></script>
<!-- The video player will prepend the player into this <div> tag. You should create css style for this tag -->
<div id='player'>
<!-- You can define any HTML tag into here and create css style for those as your UI -->
<div class='controls'>
<div class='button' onclick='/*do something with player playback API*/'>Play/Pause</div>
<div class='button' onclick='/*do something with player playback API*/'>On/Off fullscreen</div>
<!-- and more... -->
</div>
</div>
<script>
// This code creates an UIZA player without controls, and return the player for the callback
UZ.Player.init(
'#player', // player element, exp: #element_id, .element_class
{
api: btoa('YOUR_DOMAIN_API'),
appId: 'YOUR_APP_ID',
playerVersion: 3, // you are using the newest player, the version is: 3
entityId: 'YOUR_ENTITY_ID',
width: '100%', // player width, percentage or pixel, exp: '400px'
height: '100%', // player height, percentage or pixel, exp: '200px'
controls: false, // to hide the player's controls
},
function(player) {
// You can add event listeners at here
player.on('play', function() {
console.log('play');
});
player.on('pause', function() {
console.log('pause');
});
}
);
</script>
</body>
</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
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
// Use configuration from the dashboard
// Custom by code:
import UIKit
import UizaSDK
open class UZCustomTheme: UZPlayerTheme {
// player will set this value automatically, you can access to all button controls inside this view
public weak var controlView: UZPlayerControlView? = nil
/*
init your own controls in this function
*/
open func updateUI() {
}
/*
layout your controls in this function
*/
open func layoutControls(rect: CGRect) {
}
/*
put all cleanning code here, like removing delegate, remove gesture target ...
*/
open func cleanUI() {
}
/*
override this to returns all custom buttons if applicable
*/
open func allButtons() -> [UIButton] {
return []
}
/*
show loading indicator
*/
open func showLoader() {
}
/*
hide loading indicator
*/
open func hideLoader() {
controlView?.loadingIndicatorView?.isHidden = true
controlView?.loadingIndicatorView?.stopAnimating()
}
/*
update your UI according to video or playlist
*/
open func update(withResource: UZPlayerResource?, video: UZVideoItem?, playlist: [UZVideoItem]?) {
let isEmptyPlaylist = (playlist?.count ?? 0) == 0
controlView?.nextButton.isHidden = isEmptyPlaylist
controlView?.previousButton.isHidden = isEmptyPlaylist
controlView?.forwardButton.isHidden = !isEmptyPlaylist
controlView?.backwardButton.isHidden = !isEmptyPlaylist
}
}
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
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
// Use configuration from the dashboard
/* Custom by code:
/* Step 1: Create layout uiza_controller_skin_custom_main.xml like:
/* https://github.com/uizaio/uiza-android-sdk-player/blob/dev/sample/src/main/res/layout/uiza_controller_skin_custom_main.xml
/* Step 2: Create layout uiza_controller_skin_custom_detail.xml like:
/* https://github.com/uizaio/uiza-android-sdk-player/blob/dev/sample/src/main/res/layout/uiza_controller_skin_custom_detail.xml
/* Step 3:' On function onCreate() of Activity, put this code:
/* UZUtil.setCurrentPlayerId(R.layout.uiza_controller_skin_custom_main);
/* Full example:
/* https://github.com/uizaio/uiza-android-sdk-player/tree/dev/sample/src/main/java/testlibuiza/sample/v3/customskin
*/
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
uiza_controller_skin_custom_main.xml:
<?xml version="1.0" encoding="utf-8"?>
<uizacoresdk.view.UZPlayerView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@id/player_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:keepScreenOn="true"
app:auto_show="false"
app:controller_layout_id="@layout/uiza_controller_skin_custom_detail" />
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
uiza_controller_skin_custom_detail.xml:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/background_player_controller"
android:elevation="4dp"
android:layoutDirection="ltr">
<TextView
android:id="@+id/tv_sample"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:gravity="center"
android:text="@string/app_name"
android:textColor="@color/Red"
android:textSize="@dimen/txt_18" />
<LinearLayout
android:id="@id/ll_top"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:gravity="center_vertical"
android:orientation="horizontal">
<vn.uiza.views.autosize.UZImageButton
android:id="@id/exo_back_screen"
android:layout_width="@dimen/w_50"
android:layout_height="@dimen/w_50"
android:background="@color/transparent"
android:contentDescription="@string/app_name"
android:scaleType="centerInside"
android:src="@drawable/animation"
android:tint="@color/Red"
app:useDefaultIB="false" />
<vn.uiza.views.autosize.UZTextView
android:id="@id/tv_title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="@dimen/margin_10"
android:layout_weight="1"
android:singleLine="true"
android:textColor="@color/DeepPink"
android:textSize="@dimen/txt_32"
android:textStyle="bold"
app:useDefaultTV="false" />
<vn.uiza.views.autosize.UZImageButton
android:id="@id/exo_share"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@color/transparent"
android:scaleType="centerInside"
android:src="@drawable/baseline_share_white_48" />
<vn.uiza.views.autosize.UZImageButton
android:id="@id/exo_fullscreen_toggle_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@color/transparent"
android:scaleType="centerInside"
android:src="@drawable/baseline_fullscreen_white_48" />
</LinearLayout>
<RelativeLayout
android:id="@id/rl_live_info"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/ll_top">
<vn.uiza.views.autosize.UZTextView
android:id="@id/tv_live"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:background="@drawable/background_live"
android:gravity="center"
android:paddingLeft="@dimen/padding_5"
android:paddingRight="@dimen/padding_5"
android:text="@string/live"
android:textColor="@color/White" />
<vn.uiza.views.autosize.UZImageButton
android:id="@id/iv_live_time"
android:layout_width="@dimen/w_15"
android:layout_height="@dimen/w_15"
android:layout_centerVertical="true"
android:layout_toLeftOf="@id/tv_live_time"
android:background="@color/transparent"
android:scaleType="centerInside"
android:src="@drawable/baseline_timer_white_48"
android:tint="@color/Green" />
<vn.uiza.views.autosize.UZTextView
android:id="@id/tv_live_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginRight="@dimen/margin_5"
android:layout_toLeftOf="@id/iv_live_view"
android:textColor="@color/White" />
<vn.uiza.views.autosize.UZImageButton
android:id="@id/iv_live_view"
android:layout_width="@dimen/w_15"
android:layout_height="@dimen/w_15"
android:layout_centerVertical="true"
android:layout_toLeftOf="@id/tv_live_view"
android:background="@color/transparent"
android:scaleType="centerInside"
android:src="@drawable/baseline_visibility_white_48" />
<vn.uiza.views.autosize.UZTextView
android:id="@id/tv_live_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:textColor="@color/Red" />
</RelativeLayout>
<LinearLayout
android:id="@id/ll_bottom"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="vertical">
<RelativeLayout
android:id="@id/rl_time_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginTop="@dimen/margin_5">
<FrameLayout
android:id="@id/preview_frame_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/video_frame">
<ImageView
android:id="@id/image_view_thumnail"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</FrameLayout>
<vn.uiza.views.autosize.UZTextView
android:id="@id/uz_position"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/preview_frame_layout"
android:layout_marginLeft="@dimen/margin_5"
android:includeFontPadding="false"
android:textColor="@color/White"
android:textStyle="bold" />
<vn.uiza.views.autosize.UZTextView
android:id="@id/uz_duration"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/preview_frame_layout"
android:layout_alignParentEnd="true"
android:layout_gravity="bottom"
android:layout_marginRight="@dimen/margin_5"
android:includeFontPadding="false"
android:textColor="@color/Red"
android:textStyle="bold" />
<uizacoresdk.view.rl.timebar.UZTimebar
android:id="@id/exo_progress"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/uz_duration"
app:ad_marker_color="@color/White"
app:buffered_color="@color/Red"
app:played_ad_marker_color="@color/LightYellow"
app:played_color="@color/White"
app:previewFrameLayout="@id/preview_frame_layout"
app:scrubber_color="@color/White"
app:unplayed_color="@color/Blue" />
</RelativeLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="horizontal">
<vn.uiza.views.autosize.UZImageButton
android:id="@id/exo_play_uiza"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@color/transparent"
android:scaleType="centerInside"
android:src="@drawable/baseline_play_circle_outline_white_48"
android:tint="@color/Red" />
<vn.uiza.views.autosize.UZImageButton
android:id="@id/exo_pause_uiza"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@color/transparent"
android:scaleType="centerInside"
android:src="@drawable/baseline_pause_circle_outline_white_48"
android:tint="@color/Green" />
<vn.uiza.views.autosize.UZImageButton
android:id="@id/exo_replay_uiza"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@color/transparent"
android:scaleType="centerInside"
android:src="@drawable/baseline_replay_white_48" />
<vn.uiza.views.autosize.UZImageButton
android:id="@id/exo_rew"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@color/transparent"
android:scaleType="centerInside"
android:src="@drawable/baseline_replay_10_white_48"
app:srcDisabled="@mipmap/ic_disabled_3" />
<vn.uiza.views.autosize.UZImageButton
android:id="@id/exo_ffwd"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@color/transparent"
android:scaleType="centerInside"
android:src="@drawable/baseline_forward_10_white_48"
app:srcDisabled="@mipmap/ic_disabled_4" />
<vn.uiza.views.autosize.UZImageButton
android:id="@id/exo_skip_previous"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@color/transparent"
android:scaleType="centerInside"
android:src="@drawable/baseline_skip_previous_white_48"
app:srcDisabled="@mipmap/ic_disable_1" />
<vn.uiza.views.autosize.UZImageButton
android:id="@id/exo_skip_next"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@color/transparent"
android:scaleType="centerInside"
android:src="@drawable/baseline_skip_next_white_48"
app:srcDisabled="@mipmap/ic_disable_2" />
<vn.uiza.views.autosize.UZImageButton
android:id="@id/exo_playlist_folder"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@color/transparent"
android:scaleType="centerInside"
android:src="@drawable/baseline_playlist_play_white_48" />
<View
android:layout_width="0dp"
android:layout_height="@dimen/w_1"
android:layout_weight="1" />
<vn.uiza.views.autosize.UZImageButton
android:id="@id/exo_speed"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@color/transparent"
android:scaleType="centerInside"
android:src="@drawable/baseline_directions_run_white_48dp" />
<vn.uiza.views.autosize.UZImageButton
android:id="@id/exo_hearing"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@color/transparent"
android:scaleType="centerInside"
android:src="@drawable/baseline_audiotrack_white_48" />
<vn.uiza.views.autosize.UZImageButton
android:id="@id/exo_cc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@color/transparent"
android:scaleType="centerInside"
android:src="@drawable/baseline_closed_caption_white_48" />
<vn.uiza.views.autosize.UZImageButton
android:id="@id/exo_setting"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@color/transparent"
android:scaleType="centerInside"
android:src="@drawable/baseline_high_quality_white_48" />
<vn.uiza.views.autosize.UZImageButton
android:id="@id/exo_volume"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@color/transparent"
android:scaleType="centerInside"
android:src="@drawable/baseline_volume_up_white_48" />
</LinearLayout>
</LinearLayout>
<RelativeLayout
android:id="@id/rl_end_screen"
android:layout_width="match_parent"
android:layout_height="match_parent">
<vn.uiza.views.autosize.UZTextView
android:id="@id/tv_end_screen_msg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:textColor="@color/DeepPink"
android:textSize="@dimen/txt_25" />
</RelativeLayout>
</RelativeLayout>
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
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
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
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
// Unsupported UI
1
// Use configuration from the dashboard
1
# How To Play
<!DOCTYPE html>
<html>
<body>
<!-- 1. Include UIZA library. -->
<script src='https://sdk.uiza.io/uizaplayer.js'></script>
<!-- 2. The video player will prepend the player into this <div> tag. You should create css style for this tag -->
<div id='player'></div>
<script>
// 3. This code creates an UIZA player, and return the player for the callback
UZ.Player.init(
'#player', // player element, exp: #element_id, .element_class
{
api: btoa('YOUR_DOMAIN_API'),
appId: 'YOUR_APP_ID',
playerId: 'YOUR_PLAYER_ID', // option
playerVersion: 3, // you are using the newest player, the version is: 3
entityId: 'YOUR_ENTITY_ID',
width: '100%', // player width, percentage or pixel, exp: '400px'
height: '100%', // player height, percentage or pixel, exp: '200px'
},
function(player) {
// 4. You can add logo at here
// 5. You can add event listeners at here
player.on('play', function() {
console.log('play');
});
player.on('pause', function() {
console.log('pause');
});
}
);
</script>
</body>
</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
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
Step 1. Installation
pod 'UizaSDK' // for iOS 10+
pod 'UizaSDK_8' // for iOS 8,9
1
2
2
pod install
1
Step 2. Init SDK:
import UizaSDK
UizaSDK.initWith(appId: YOUR_APP_ID, token: TOKEN, api: YOUR_DOMAIN)
1
2
3
2
3
let playerViewController = UZPlayerViewController()
playerViewController.player.loadVideo(entityId: ENTITY_ID)
present(playerViewController, animated: true, completion: nil)
1
2
3
2
3
Info.plist:
<key>NSAppTransportSecurity</key>
<dict>
<key>NSAllowsArbitraryLoads</key><true/>
</dict>
1
2
3
4
2
3
4
Step 1. Add the JitPack repository to your build file:
allprojects {
repositories {
maven { url 'https://jitpack.io' }
}
}
1
2
3
4
5
2
3
4
5
Step 2. Add the dependency
defaultConfig {
multiDexEnabled true
}
dependencies {
//for playing video VOD, LIVE
implementation 'com.github.uizaio.uiza-android-sdk-player:uizacoresdk:[lasted-release-number]'
//for live broadcaster
implementation 'com.github.uizaio.uiza-android-sdk-player:uizalivestream:[lasted-release-number]'
}
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
Step 3. Init SDK:
- appId : get in email at registration
- token : generate HERE.
- api : get in email at registration -
public class App extends MultiDexApplication {
@Override
public void onCreate() {
super.onCreate();
UZUtil.initWorkspace(this, api, token, appId);
}
}
1
2
3
4
5
6
7
2
3
4
5
6
7
XML:
<uizacoresdk.view.rl.video.UZVideo
android:id="@id/uiza_video"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
1
2
3
4
2
3
4
Manifest:
<activity
android:name=".MainActivity "
android:configChanges="keyboard|keyboardHidden|orientation|screenSize|screenLayout|smallestScreenSize|uiMode" />
1
2
3
2
3
Create java file MainActivity:
public class MainActivity extends AppCompatActivity implements UZCallback{
...
}
1
2
3
2
3
uzVideo = (UZVideo) findViewById(R.id.uiza_video);
uzVideo.setUZCallback(this);
UZUtil.initEntity(activity, uzVideo, "put the entity id here");
1
2
3
2
3
<!DOCTYPE html>
<html>
<head>
<!-- 1. Include Smart TV library: webapis -->
<!-- This library only for Tizen -->
<script type='application/javascript' src='$WEBAPIS/webapis/webapis.js'></script>
<!-- This library only for webOS -->
<script type='application/javascript' src='./webOSTVjs-1.0.0/webOSTV.js'></script>
<!-- 2. UIZA library -->
<script type='application/javascript' src="https://sdk.uiza.io/sdk-smart-tv-html5/uizaplayer.js"></script>
</head>
<body>
<!-- 3. The Uiza SDK will prepend the player into this tag. You should create css style for this tag -->
<div id='playerVOD' class='player'>
<!-- 4. You can add cutom UI into here -->
<div class='controls'>
<!-- some html tag of UI -->
</div>
</div>
<script type='application/javascript'>
(function() {
window.playerVOD = new UZPlayer('#playerVOD', {
api: btoa('YOUR_API_DOMAIN'),
appId: 'YOU_APP_ID'
});
playerVOD.initVOD('YOUR_ENTITY_ID', function(player) {
window.console.log('playerVOD on ready: ', player);
});
playerVOD.onCurrentTime(function(currentTime){
console.log('onCurrentTime: ' + currentTime + ' / ' + playerVOD.getDuration());
});
playerVOD.onEnded(function(){
console.log('onEnded');
});
playerVOD.onError(function(){
console.log('onError');
});
playerVOD.onFullscreen(function(fullscreen){
console.log('onFullscreen: ', fullscreen);
});
playerVOD.onLoad(function(){
console.log('onLoad');
});
playerVOD.onPause(function(){
console.log('onPause');
});
playerVOD.onPlay(function(){
console.log('onPlay');
});
playerVOD.onWaiting(function(){
console.log('onWaiting');
});
playerVOD.onPlaybackState(function(playbackState){
console.log('onPlaybackState: ', playbackState);
});
playerVOD.onVolume(function(volume){
console.log('onVolume: ', volume);
});
// You should handle keyboard/remote kere
window.addEventListener('keydown', function(evt) {
window.console.log('keydown: ', evt);
// do something
});
})();
</script>
</body>
</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
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
/** Demo project on Github:
/* https://github.com/uizaio/uiza-react-native-app-demo/tree/v3
**/
import React from 'react';
import { StyleSheet, Text, SafeAreaView } from 'react-native';
import UZPlayer from '@uiza/uiza-sdk-player-react-native';
import { Dimensions, Platform } from 'react-native';
export default class App extends React.Component {
constructor(props) {
super(props);
let self = this;
this.listenerVod = {
onReady: function() { console.log('onReady call'); },
onLoad: function() { console.log('onLoad call'); },
onLoaded: function(evt) { console.log('onLoaded call', evt); },
onFullscreenChange: function(evt) { console.log('onLoaded call', evt); },
onPlaybackChange: function(evt) { console.log('onLoaded call', evt); },
onError: function(evt) { console.log('onLoaded call', evt); },
};
}
render() {
const api = 'BASE64_YOUR_API';
const token = 'YOUR_TOKEN';
const appId = 'YOUR_APP_ID';
// vod config
const entityIdVod = 'YOUR_VOD_ENTITY_ID';
return (
<SafeAreaView style={styles.container}>
<Text style={{marginTop: isAndroid()? 0 : isIphoneX()? 0 : 20}}>This is VOD demo</Text>
<UZPlayer
debug={true}
token={token}
api={api}
appId={appId}
stream='vod'
entityId={entityIdVod}
style={styles.player}
ref={
component => {
this.playerVod = component;
}
}
listener={this.listenerVod}
playerId={playerId}
/>
</SafeAreaView>
);
}
}
export const isIphoneX = () => {
let d = Dimensions.get('window');
const { height, width } = d;
return (
// This has to be iOS duh
Platform.OS === 'ios' &&
// Accounting for the height in either orientation
(height === 812 || width === 812)
);
}
export const isAndroid = () => {
let d = Dimensions.get('window');
return (
// This has to be iOS duh
Platform.OS === 'android'
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: 22,
backgroundColor: 'steelblue',
},
player: {
width: '100%',
height: '33%',
backgroundColor: 'black',
},
description: {
flex: 1,
padding: 10,
},
});
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
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
<!DOCTYPE html>
<html>
<body>
<!-- 1. Include UIZA library. -->
<script src='https://sdk.uiza.io/uizaplayer.js'></script>
<!-- 2. The video player will prepend the player into this <div> tag. You should create css style for this tag -->
<div id='player'></div>
<script>
// 3. This code creates an UIZA player, and return the player for the callback
UZ.Player.init(
'#player', // player element, exp: #element_id, .element_class
{
api: btoa('YOUR_DOMAIN_API'),
appId: 'YOUR_APP_ID',
playerId: 'YOUR_PLAYER_ID', // option
playerVersion: 3, // you are using the newest player, the version is: 3
entityId: 'YOUR_ENTITY_ID',
streamName: 'YOUR_STREAM_NAME',
feedId: 'YOUR_FEED_ID',
region: 'YOUR_REGION',
width: '100%', // player width, percentage or pixel, exp: '400px'
height: '100%', // player height, percentage or pixel, exp: '200px'
},
function(player) {
// 4. You can add logo at here
// 5. You can add event listeners at here
player.on('play', function() {
console.log('play');
});
player.on('pause', function() {
console.log('pause');
});
}
);
</script>
</body>
</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
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
Step 1. Installation
pod 'UizaSDK' // for iOS 10+
pod 'UizaSDK_8' // for iOS 8,9
1
2
2
pod install
1
Step 2. Init SDK:
import UizaSDK
UizaSDK.initWith(appId: YOUR_APP_ID, token: TOKEN, api: YOUR_DOMAIN)
1
2
3
2
3
let playerViewController = UZPlayerViewController()
playerViewController.player.loadVideo(entityId: ENTITY_ID)
present(playerViewController, animated: true, completion: nil)
1
2
3
2
3
Info.plist:
<key>NSAppTransportSecurity</key>
<dict>
<key>NSAllowsArbitraryLoads</key><true/>
</dict>
1
2
3
4
2
3
4
Step 1. Add the JitPack repository to your build file:
allprojects {
repositories {
maven { url 'https://jitpack.io' }
}
}
1
2
3
4
5
2
3
4
5
Step 2. Add the dependency
defaultConfig {
multiDexEnabled true
}
dependencies {
//for playing video VOD, LIVE
implementation 'com.github.uizaio.uiza-android-sdk-player:uizacoresdk:[lasted-release-number]'
//for live broadcaster
implementation 'com.github.uizaio.uiza-android-sdk-player:uizalivestream:[lasted-release-number]'
}
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
Step 3. Init SDK:
- appId : get in email at registration
- token : generate HERE.
- api : get in email at registration -
public class App extends MultiDexApplication {
@Override
public void onCreate() {
super.onCreate();
UZUtil.initWorkspace(this, api, token, appId);
}
}
1
2
3
4
5
6
7
2
3
4
5
6
7
XML:
<uizacoresdk.view.rl.video.UZVideo
android:id="@id/uiza_video"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
1
2
3
4
2
3
4
Manifest:
<activity
android:name=".MainActivity "
android:configChanges="keyboard|keyboardHidden|orientation|screenSize|screenLayout|smallestScreenSize|uiMode" />
1
2
3
2
3
Create java file MainActivity:
public class MainActivity extends AppCompatActivity implements UZCallback{
...
}
1
2
3
2
3
uzVideo = (UZVideo) findViewById(R.id.uiza_video);
uzVideo.setUZCallback(this);
UZUtil.initEntity(activity, uzVideo, "put the entity id here");
1
2
3
2
3
<!DOCTYPE html>
<html>
<head>
<!-- 1. Include Smart TV library: webapis -->
<!-- This library only for Tizen -->
<script type='application/javascript' src='$WEBAPIS/webapis/webapis.js'></script>
<!-- This library only for webOS -->
<script type='application/javascript' src='./webOSTVjs-1.0.0/webOSTV.js'></script>
<!-- 2. UIZA library -->
<script type='application/javascript' src="https://sdk.uiza.io/sdk-smart-tv-html5/uizaplayer.js"></script>
</head>
<body>
<!-- 3. The Uiza SDK will prepend the player into this tag. You should create css style for this tag -->
<div id='playerLive' class='player'>
<!-- 4. You can add cutom UI into here -->
<div class='controls'>
<!-- some html tag of UI -->
</div>
</div>
<script type='application/javascript'>
(function() {
window.playerLive = new UZPlayer('#playerLive', {
api: btoa('YOUR_API_DOMAIN'),
appId: 'YOU_APP_ID'
});
playerLive.initLive('YOUR_ENTITY_ID',
'YOUR_STREAM_NAME',
'YOUR_REGION',
function(player) {
window.console.log('playerLive on ready: ', player);
});
playerLive.onCurrentTime(function(currentTime){
console.log('onCurrentTime: ' + currentTime);
});
playerLive.onEnded(function(){
console.log('onEnded');
});
playerLive.onError(function(){
console.log('onError');
});
playerLive.onFullscreen(function(fullscreen){
console.log('onFullscreen: ', fullscreen);
});
playerLive.onLoad(function(){
console.log('onLoad');
});
playerLive.onWaiting(function(){
console.log('onWaiting');
});
playerLive.onPlaybackState(function(playbackState){
console.log('onPlaybackState: ', playbackState);
});
playerLive.onVolume(function(volume){
console.log('onVolume: ', volume);
});
// You should handle keyboard/remote kere
window.addEventListener('keydown', function(evt) {
window.console.log('keydown: ', evt);
// do something
});
})();
</script>
</body>
</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
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
/** Demo project on Github:
/* https://github.com/uizaio/uiza-react-native-app-demo/tree/v3
**/
import React from 'react';
import { StyleSheet, Text, SafeAreaView } from 'react-native';
import UZPlayer from '@uiza/uiza-sdk-player-react-native';
import { Dimensions, Platform } from 'react-native';
export default class App extends React.Component {
constructor(props) {
super(props);
let self = this;
this.listenerLive = {
onReady: function() { },
onLoad: function() { },
onLoaded: function(evt) { },
onFullscreenChange: function(evt) { },
onPlaybackChange: function(evt) { },
onError: function(evt) { },
};
}
render() {
const api = 'BASE64_YOUR_API';
const token = 'YOUR_TOKEN';
const appId = 'YOUR_APP_ID';
// live config
const entityIdLive = 'YOUR_LIVE_ENTITY_ID';
const feedId = 'YOUR_FEED_ID';
const streamName = 'YOUR_STREAM_NAME';
const region = 'YOUR_REGION';
const playerId = 'YOUR_PLAYER_ID';
return (
<SafeAreaView style={styles.container}>
<Text style={{marginTop: isAndroid()? 0 : isIphoneX()? 0 : 20}}>This is Live demo</Text>
<UZPlayer
token={token}
api={api}
appId={appId}
stream='live'
entityId={entityIdLive}
feedId={feedId}
streamName={streamName}
region={region}
style={styles.player}
ref={
component => {
this.playerLive = component;
}
}
listener={this.listenerLive}
playerId={playerId}
/>
</SafeAreaView>
);
}
}
export const isIphoneX = () => {
let d = Dimensions.get('window');
const { height, width } = d;
return (
// This has to be iOS duh
Platform.OS === 'ios' &&
// Accounting for the height in either orientation
(height === 812 || width === 812)
);
}
export const isAndroid = () => {
let d = Dimensions.get('window');
return (
// This has to be iOS duh
Platform.OS === 'android'
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: 22,
backgroundColor: 'steelblue',
},
player: {
width: '100%',
height: '33%',
backgroundColor: 'black',
},
description: {
flex: 1,
padding: 10,
},
});
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
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