Skip to content

Commit 283295e

Browse files
author
olivierapivideo
authored
README to documentation synchro
1 parent fd7341a commit 283295e

File tree

1 file changed

+67
-60
lines changed

1 file changed

+67
-60
lines changed

sdks/player/apivideo-player-sdk.md

Lines changed: 67 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,10 @@ title: api.video Player SDK
33
meta:
44
description: The official api.video Player SDK for api.video. [api.video](https://api.video/) is the video infrastructure for product builders. Lightning fast video APIs for integrating, scaling, and managing on-demand & low latency live streaming features in your app.
55
---
6+
<!--
7+
THIS FILE IS AUTOMATICALLY GENERATED. DO NOT EDIT!
8+
IF YOU NEED TO CHANGE THIS FILE, CREATE A PR IN THE SOURCE REPOSITORY.
9+
-->
610

711
# api.video Player SDK
812

@@ -108,88 +112,87 @@ The PlayerSdk constructor takes 2 parameters:
108112

109113
The sdk instance can be used to control the video playback, and to listen to player events.
110114

111-
### Ads
115+
#### Ads
112116
Ads can be displayed in the player. To do so, you need to pass the `ads` option to the sdk constructor. In the `ads` object, pass the `adTagUrl` property with the url of the ad tag. The ad tag must be a VAST 2.0 or 3.0 url. For more information about VAST, check the [IAB documentation](https://www.iab.com/guidelines/vast/).
113117

114118
Note: ads are displayed using the [Google IMA SDK](https://developers.google.com/interactive-media-ads/docs/sdks/html5/quickstart).
115119

116-
## Methods
120+
### Methods
117121

118-
The SDK instance has the following methods:
122+
The sdk instance has the following methods:
119123

120-
- `loadConfig(options: SdkOptions)`
121-
Load a new video in the same instance of the player. Available options are the same as the ones passed to the SDK nstructor (see available).
122-
Example:
124+
**`loadConfig(options: SdkOptions)`**
125+
126+
Load a new video in the same instance of the player. Available options are the same as the ones passed to the SDK constructor (see available).
127+
128+
> Example:
123129
```javascript
124130
player.loadConfig({
125131
id: "<VIDEO_ID>",
126132
hideTitle: true,
127133
hideControls: true,
128134
});
129135
```
130-
- `play()`
136+
**`play()`**
131137

132138
Start playing the video.
133139

134-
- `pause()`
140+
**`pause()`**
135141

136142
Pause the video playback.
137143

138-
- `mute()`
144+
**`mute()`**
139145

140146
Mute the video.
141147

142-
- `unmute()`
148+
**`unmute()`**
143149

144150
Unmute the video.
145151

146-
- `hideControls(controls?: ControlName[])`
152+
**`hideControls(controls?: ControlName[])`**
147153

148154
Hide the player controls.
149155

156+
150157
`controls` parameter type definition:
151158
```typescript
152159
type ControlName = "play" | "seekBackward" | "seekForward" | "playbackRate"
153160
| "volume" | "fullscreen" | "subtitles" | "chapters"
154161
| "pictureInPicture" | "progressBar" | "chromecast" | "download" | "more";
155162
```
156-
157-
If no value is provided for the "controls" parameter, all controls will be hidden.
163+
> If no value is provided for the "controls" parameter, all controls will be hidden.
158164
159165
**Note**: the only control that can still be visible is the unmute button if the video as started muted. To hide all controls, including this one, use the setChromeless() method
160166

161167
Example:
162168
```javascript
163169
player.hideControls();
164170
```
165-
166-
If a list of control names if provided, the associated controls will be hidden.
171+
> If a list of control names if provided, the associated controls will be hidden.
167172
168173
Example:
169174
```javascript
170175
player.showControls(); // display all controls ...
171176
player.hideControls(["download", "subtitles"]); // ... except "download" and "subtitles"
172177
```
173-
174-
- `showControls(controls?: ControlName[])`
178+
**`showControls(controls?: ControlName[])`**
175179

176180
Show the player controls.
177181

182+
178183
`controls` parameter type definition:
179184
```typescript
180185
type ControlName = "play" | "seekBackward" | "seekForward" | "playbackRate"
181186
| "volume" | "fullscreen" | "subtitles" | "chapters"
182187
| "pictureInPicture" | "progressBar" | "chromecast" | "download" | "more";
183188
```
184-
185-
If no value is provided for the "controls" parameter, all controls will be displayed.
189+
> If no value is provided for the "controls" parameter, all controls will be displayed.
186190
187191
Example:
188192
```javascript
189193
player.showControls();
190194
```
191-
192-
If a list of control names if provided, the associated controls will be displayed.
195+
> If a list of control names if provided, the associated controls will be displayed.
193196
194197
Example:
195198
```javascript
@@ -198,87 +201,87 @@ Example:
198201
// ...
199202
player.showControls(["progressBar"]); // ... and the progress bar
200203
```
201-
202-
- `setChromeless(chromeless: boolean)`
204+
**`setChromeless(chromeless: boolean)`**
203205

204206
Define if the player should be in chromeless mode (all controls hidden).
205207

206-
- `hideSubtitles()`
208+
**`hideSubtitles()`**
207209

208210
Hide the player subtitles.
209211

210-
- `showSubtitles()`
212+
**`showSubtitles()`**
211213

212214
Show the player subtitles.
213215

214-
- `hideTitles()`
216+
**`hideTitles()`**
215217

216218
Hide the video title at the top of the video.
217219

218-
- `showTitles()`
220+
**`showTitles()`**
219221

220222
Show the video title at the top of the video.
221223

222-
- `setLoop(loop: boolean)`
224+
**`setLoop(loop: boolean)`**
223225

224226
Define if the video should be played in loop.
225227

226-
- `setAutoplay(autoplay: boolean)`
228+
**`setAutoplay(autoplay: boolean)`**
227229

228230
Define if the video should start playing as soon as it is loaded
229231

230-
- `seek(time: number)`
232+
**`seek(time: number)`**
231233

232234
Add/substract the given number of seconds to/from the playback time.
233235

234-
- `setPlaybackRate(rate: number)`
236+
**`setPlaybackRate(rate: number)`**
235237

236238
Set the current playback rate.
237239

238240
Example:
239241
```javascript
240-
player.setPlaybackRate(2); // Play at 2x rate
242+
player.setPlaybackRate(2); // Play at 2x rate
241243
```
242-
243-
- `setCurrentTime(time: number)`
244+
**`setCurrentTime(time: number)`**
244245

245246
Set the current playback time (seconds).
246247

247-
Example:
248+
>Example:
248249
```javascript
249-
player.setCurrentTime(24); // Go the 24th second
250+
player.setCurrentTime(24); // Go the 24th second
250251
```
251-
252-
- `setVolume(volume: number)`
252+
**`setVolume(volume: number)`**
253253

254254
Change the audio volume to the given value. From 0 to 1 (0 = muted, 1 = 100%).
255255

256-
Example:
256+
> Example:
257257
```javascript
258258
player.setVolume(0.75); // Set the volume to 75%
259259
```
260-
261-
- `setVideoStyleObjectFit(value: "contain" | "cover" | "fill" | "none" | "scale-down")`
260+
**`setVideoStyleObjectFit(value: "contain" | "cover" | "fill" | "none" | "scale-down")`**
262261

263262
Change the [object-fit](https://developer.mozilla.org/fr/docs/Web/CSS/object-fit) CSS value of the video tag.
264263

264+
265265
Example:
266266
```javascript
267267
player.setVideoStyleObjectFit("cover"); // Set the object-fit to cover
268268
```
269269

270-
- `setVideoStyleTransform(value: string)`
270+
**`setVideoStyleTransform(value: string)`**
271271

272272
Change the [transform](https://developer.mozilla.org/fr/docs/Web/CSS/transform) CSS value of the video tag.
273273

274+
274275
Example:
275276
```javascript
276277
player.setVideoStyleTransform("rotateY(180deg)"); // Apply a 180deg rotation around the Y axis (mirroring)
277278
```
278279

279-
- `setTheme(theme: PlayerTheme)`
280+
**`setTheme(theme: PlayerTheme)`**
281+
280282
Change the appearance of the player.
281283

284+
282285
`theme` parameter type definition:
283286
```typescript
284287
type PlayerTheme = {
@@ -294,8 +297,7 @@ type PlayerTheme = {
294297
linkActive?: string;
295298
}
296299
```
297-
298-
Example:
300+
> Example:
299301
```javascript
300302
player.setTheme({
301303
link: "red",
@@ -304,62 +306,67 @@ Example:
304306
});
305307
```
306308

307-
- `requestFullscreen()`
309+
**`requestFullscreen()`**
308310

309311
Request fullscreen mode (this may not work in some cases depending on browser restrictions)
310312

311-
- `exitFullscreen()`
313+
**`exitFullscreen()`**
312314

313315
Leave fullscreen mode
314316

315-
- `requestPictureInPicture()`
317+
**`requestPictureInPicture()`**
316318

317319
Request picture in picture mode (this may not work in some cases depending on browser restrictions)
318320

319-
- `exitPictureInPicture()`
321+
**`exitPictureInPicture()`**
320322

321323
Leave picture in picture mode
322324

323-
- `getPaused(callback?: (paused: boolean) => void): Promise<boolean>`
325+
**`getPaused(callback?: (paused: boolean) => void): Promise<boolean>`**
324326

325327
Check weither the video is paused.
326328

327-
- `getPlaying(callback?: (playing: boolean) => void): Promise<boolean>`
329+
**`getPlaying(callback?: (playing: boolean) => void): Promise<boolean>`**
328330

329331
Check weither the video is playing.
330332

331-
- `getMuted(callback?: (muted: boolean) => void): Promise<boolean>`
333+
**`getMuted(callback?: (muted: boolean) => void): Promise<boolean>`**
332334

333335
Check weither the video is muted.
334336

335-
- `getDuration(callback?: (duration: number) => void): Promise<number>`
337+
**`getDuration(callback?: (duration: number) => void): Promise<number>`**
336338

337339
Retrieve the duration of the video.
338340

339-
- `getCurrentTime(callback?: (currentTime: number) => void): Promise<number>`
341+
**`getCurrentTime(callback?: (currentTime: number) => void): Promise<number>`**
340342

341343
Retrieve the current playback time of the video.
342344

343-
- `getVolume(callback?: (volume: number) => void): Promise<number>`
345+
**`getVolume(callback?: (volume: number) => void): Promise<number>`**
344346

345347
Retrieve the current volume.
346348

347-
- `getLoop(callback?: (loop: boolean) => void): Promise<boolean>`
349+
**`getLoop(callback?: (loop: boolean) => void): Promise<boolean>`**
348350

349351
Check whether the video is in loop mode.
350352

351-
- `getPlaybackRate(callback?: (rate: number) => void): Promise<number>`
353+
**`getPlaybackRate(callback?: (rate: number) => void): Promise<number>`**
352354

353355
Retrieve the playback rate.
354356

355-
- `destroy()`
357+
**`isLiveStream(callback?: (live: boolean) => void): Promise<boolean>`**
358+
359+
Check whether the video is a live stream.
360+
361+
**`destroy()`**
356362

357363
Destroy the player instance.
358364

359-
- `addEventListener(event: string, callback: () => void)`
365+
**`addEventListener(event: string, callback: () => void)`**
360366

361367
Define a callback function that will be called when the given event is triggered by the player.
362368

369+
363370
Available events are the following:
364371

365372
Event name | Description | Parameter
@@ -491,4 +498,4 @@ Here is how the page will look like with these changes :
491498
};
492499
</script>
493500
</html>
494-
```
501+
```

0 commit comments

Comments
 (0)