Skip to content

Commit db43147

Browse files
saseungminsaseungmin
committed
feat: add all vimeo embed options
1 parent a832cb0 commit db43147

File tree

1 file changed

+250
-26
lines changed

1 file changed

+250
-26
lines changed

‎src/types/vimeo.ts‎

Lines changed: 250 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -105,35 +105,259 @@ export interface VimeoTextTrack {
105105
mode?: string | undefined;
106106
}
107107

108-
export interface VimeoPlayerOptions {
109-
id?: number | undefined;
110-
url?: string | undefined;
111-
autopause?: boolean | undefined;
108+
// NOTE - https://developer.vimeo.com/player/sdk/embed
109+
export interface EmbedOptions {
110+
/**
111+
* @description The ID or the URL of the video on Vimeo. You must supply one of these values to identify the video. When the video's [privacy setting](https://help.vimeo.com/hc/en-us/articles/12426199699985-Overview-of-video-privacy-settings) is Unlisted, you must use the URL, and the URL must include the h parameter. For more information, see our [introductory guide](https://developer.vimeo.com/player/sdk/basics#connecting-to-a-vimeo-player).
112+
*/
113+
id?: number;
114+
/**
115+
* @description The ID or the URL of the video on Vimeo. You must supply one of these values to identify the video. When the video's [privacy setting](https://help.vimeo.com/hc/en-us/articles/12426199699985-Overview-of-video-privacy-settings) is Unlisted, you must use the URL, and the URL must include the h parameter. For more information, see our [introductory guide](https://developer.vimeo.com/player/sdk/basics#connecting-to-a-vimeo-player).
116+
*/
117+
url?: string;
118+
/**
119+
* @description Whether AirPlay is enabled in the embeddable player.
120+
* @default true
121+
*/
122+
airplay?: boolean;
123+
/**
124+
* @description Whether multiple audio tracks can appear in the embeddable player. This option has no effect if your video doesn't have additional audio tracks uploaded to it.
125+
* @default true
126+
*/
127+
audio_tracks?: boolean;
128+
/**
129+
* @description The initial audio track to play with the video. The value of this option can be the language code alone (fr), the language code and region (fr-ca), or the language code and kind (fr,descriptions) of the desired audio. Set this value to main to select the original audio for the video. If there is no matching track, the player ignores this value.
130+
*/
131+
audiotrack?: string;
132+
/**
133+
* @description Whether to pause the current video when another Vimeo video on the same page starts to play. Set this value to `false` to permit simultaneous playback of all the videos on the page. This option has no effect if you've disabled cookies in your browser, either through browser settings or with an extension or plugin.
134+
* @default true
135+
*/
136+
autopause?: boolean;
137+
/**
138+
* @description Whether to start playback of the video automatically. This feature might not work on all devices.
139+
* @default false
140+
*/
112141
autoplay?: boolean | undefined;
142+
/**
143+
* @description Whether the player is in background mode, which hides the playback controls, enables autoplay, and loops the video.
144+
* @default false
145+
*/
113146
background?: boolean | undefined;
147+
/**
148+
* @description Whether to display the video owner's name.
149+
* @default true
150+
*/
114151
byline?: boolean | undefined;
115-
color?: string | undefined;
116-
controls?: boolean | undefined;
117-
dnt?: boolean | undefined;
118-
interactive_params?: string | undefined;
119-
keyboard?: boolean | undefined;
120-
loop?: boolean | undefined;
121-
muted?: boolean | undefined;
122-
pip?: boolean | undefined;
123-
playsinline?: boolean | undefined;
124-
portrait?: boolean | undefined;
125-
speed?: boolean | undefined;
126-
quality?: VimeoVideoQuality | undefined;
127-
texttrack?: string | undefined;
128-
title?: boolean | undefined;
129-
transparent?: boolean | undefined;
152+
/**
153+
* @description Whether closed captions are enabled in the embeddable player. This option has no effect if your video doesn't have captions or subtitles.
154+
* @default true
155+
*/
156+
cc?: boolean;
157+
/**
158+
* @description The chapter by ID to start playback at.
159+
*/
160+
chapter_id?: string;
161+
/**
162+
* @description Whether chapters are enabled in the embeddable player. This option has no effect if your video doesn't have chapters set.
163+
* @default true
164+
*/
165+
chapters?: boolean;
166+
/**
167+
* @description Whether the Chromecast button appears in the embeddable player.
168+
* @default true
169+
*/
170+
chromecast?: boolean;
171+
/**
172+
* @description The hexadecimal accent color value of the playback controls, which is normally 00ADEF. The embed settings of the video might override this value. For more information about player colors, refer to the colors option.
173+
*/
174+
color?: string;
175+
/**
176+
* @description The hexadecimal color values of the player. The embed settings of the video might override these values. The order of the player colors is [Primary, Accent, Text/Icon, Background], with corresponding default values of ["000000", "00ADEF", "FFFFFF", "000000"].
177+
*/
178+
colors?: [string, string, string, string];
179+
/**
180+
* @description Whether to display the player's interactive elements, including the play bar and sharing buttons. Set this option to false for a chromeless experience. To control playback when the play/pause button is hidden, set autoplay to true, use keyboard controls (which remain active), or implement our player SDK.
181+
* @default true
182+
*/
183+
controls?: boolean;
184+
/**
185+
* @description Whether to prevent the player from tracking session data, including cookies. Keep in mind that setting this argument to true also blocks [video stats](https://vimeo.com/stats).
186+
* @default false
187+
*/
188+
dnt?: boolean;
189+
/**
190+
* @description In Segmented Playback mode, the time in seconds where playback ends for the video. Setting this field enables Segmented Playback mode, where the video is presented as a segment of the original as defined by this field and the start_time field, with a duration in seconds equal to end_time minus start_time. If start_time is omitted, the start time defaults to 0.
191+
*/
192+
end_time?: number;
193+
/**
194+
* @description Whether to show the fullscreen button in the embeddable player.
195+
* @default true
196+
*/
197+
fullscreen?: boolean;
198+
/**
199+
* @description The playback quality of the first seconds of video loaded. After that, normal adaptive bitrate logic applies. Setting a lower quality can help to make playback start more quickly, while setting a higher quality helps to ensure that viewers receive high-resolution video as soon as the video begins playing. This field can take any value from the quality menu in the player for the video. Common values are 360p, 720p, 1080p, 2k, and 4k.
200+
*/
201+
initial_quality?: VimeoVideoQuality;
202+
/**
203+
* @description Whether to display markers representing the timestamp where hotspots appear on an interactive video.
204+
* @default true
205+
*/
206+
interactive_markers?: boolean;
207+
/**
208+
* @description Key-value pairs representing dynamic parameters that are utilized on interactive videos with dynamic elements, such as title=my-video,subtitle=interactive.
209+
*/
210+
interactive_params?: string;
211+
/**
212+
* @description Whether to enable keyboard input to trigger player events. This setting doesn't affect tab control.
213+
* @default true
214+
*/
215+
keyboard?: boolean;
216+
/**
217+
* @description Whether to restart the video automatically after reaching the end.
218+
* @default false
219+
*/
220+
loop?: boolean;
221+
/**
222+
* @description The highest possible quality that the player automatically switches to during video playback. The player determines the best quality to play at without exceeding this maximum value. Setting this parameter can help to reduce bandwidth usage. This field can take any value from the quality menu in the player for the video. Common values are 360p, 720p, 1080p, 2k, or 4k.
223+
*/
224+
max_quality?: VimeoVideoQuality;
225+
/**
226+
* @description Whether the video is muted upon loading. The true value is required for the autoplay behavior in some browsers.
227+
* @default false
228+
*/
229+
muted?: boolean;
230+
/**
231+
* @description Whether to include the picture-in-picture button among the player controls and enable the Picture-in-Picture API, where supported.
232+
* @default true
233+
*/
234+
pip?: boolean;
235+
/**
236+
* @description The position of the play button within the embeddable player.
237+
* @default 'auto'
238+
*/
239+
play_button_position?: 'bottom' | 'center' | 'auto';
240+
/**
241+
* @description Whether the video plays inline on supported mobile devices. To force the device to play the video in fullscreen mode instead, set this value to false.
242+
* @default true
243+
*/
244+
playsinline?: boolean;
245+
/**
246+
* @description Whether to display the video owner's portrait.
247+
* @default true
248+
*/
249+
portrait?: boolean;
250+
/**
251+
* @description The loading behavior for the player before playback is initiated. This follows the basic principles of the native [preload property](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/preload) of the HTMLMediaElement interface, with a few additional values:
252+
* - Specify `metadata` to load metadata immediately.
253+
* - Specify `metadata_on_hover` to load metadata for the video only when the user hovers over the player.
254+
* - Specify `auto` to load metadata and the first few seconds of video immediately.
255+
* - Specify `auto_on_hover` to load metadata and the first few seconds of video only when the user hovers over the player.
256+
* - Specify `none` if you're not loading any data until playback begins.
257+
*
258+
* Preloading more data makes playback start more quickly, so using the auto and auto_on_hover values results in quicker startup than the other options, but may use more bandwidth since video segments are loaded regardless of a user playing the video. To learn more about Vimeo’s bandwidth limits, visit our [Help Center](https://help.vimeo.com/hc/en-us/articles/12426275404305-Bandwidth-on-Vimeo).
259+
* @default 'metadata_on_hover'
260+
*/
261+
preload?: 'metadata' | 'metadata_on_hover' | 'auto' | 'auto_on_hover' | 'none';
262+
/**
263+
* @description Whether to show the progress bar in the embeddable player.
264+
* @default true
265+
*/
266+
progress_bar?: boolean;
267+
/**
268+
* @description The playback quality of the video. Use auto for the best possible quality given available bandwidth and other factors. Otherwise this field can take any value from the quality menu in the player for the video. Common values are 360p, 720p, 1080p, 2k, and 4k.
269+
* @default 'auto'
270+
*/
271+
quality?: VimeoVideoQuality;
272+
/**
273+
* @description Whether to show the quality selector in the embeddable player.
274+
* @default true
275+
*/
276+
quality_selector?: boolean;
277+
/**
278+
* @description Whether users can skip forward in the embeddable player.
279+
* @default true
280+
*/
281+
skipping_forward?: boolean;
282+
/**
283+
* @description Whether to include playback speed among the player preferences.
284+
* @default false
285+
*/
286+
speed?: boolean;
287+
/**
288+
* @description In Segmented Playback mode, the time in seconds where playback starts for the video; see the end_time field for more information.
289+
* @default 0
290+
*/
291+
start_time?: number;
292+
/**
293+
* @description The text track to display with the video.
294+
* - Specify the text track by its language code (en), the language code and locale (en-US), or the language code and kind (en.captions).
295+
* - For this argument to work, the video must already have a text track of the given type; see our [Help Center](https://help.vimeo.com/hc/en-us/articles/12426156795409-Can-I-add-captions-subtitles-to-my-videos) or [Working with Text Track Uploads](https://developer.vimeo.com/api/upload/texttracks).
296+
* - To enable automatically generated closed captions instead, provide the value en-x-autogen. Please note that, at the present time, automatic captions are always in English.
297+
*/
298+
texttrack?: string;
299+
/**
300+
* @description The ID of the thumbnail to load from the video's available thumbnail set.
301+
*/
302+
thumbnail_id?: string;
303+
/**
304+
* @description Whether to display the video’s title.
305+
* @default true
306+
*/
307+
title?: boolean;
308+
/**
309+
* @description Whether transcript controls can appear in the embeddable player.
310+
* @default true
311+
*/
312+
transcript?: boolean;
313+
/**
314+
* @description Whether the responsive player and transparent background are enabled.
315+
* @default true
316+
*/
317+
transparent?: boolean;
318+
/**
319+
* @description Whether to display the unmute button.
320+
* @default true
321+
*/
322+
unmute_button?: boolean;
323+
/**
324+
* @description Whether to show the Vimeo logo in the embeddable player.
325+
* @default true
326+
*/
327+
vimeo_logo?: boolean;
328+
/**
329+
* @description Whether to show the volume selector in the embeddable player.
330+
* @default true
331+
*/
332+
volume?: boolean;
333+
/**
334+
* @description Whether to show the Watch Full Video button when Segmented Playback mode is enabled; see start_time and end_time above for more information.
335+
* @default true
336+
*/
337+
watch_full_video?: boolean;
130338

131339
// NOTE - https://github.com/vimeo/player.js/issues/38#issuecomment-242462979
132-
// maxheight?: number | undefined;
133-
// maxwidth?: number | undefined;
134-
// responsive?: boolean | undefined;
135-
// width?: number | undefined;
136-
// height?: number | undefined;
340+
/**
341+
* @description The width of the video in pixels.
342+
*/
343+
width?: number;
344+
/**
345+
* @description The height of the video in pixels.
346+
*/
347+
height?: number;
348+
/**
349+
* @description Whether to return a responsive embed code, or one that provides intelligent adjustments based on viewing conditions. We recommend this option for mobile-optimized sites.
350+
* @default false
351+
*/
352+
responsive?: boolean;
353+
/**
354+
* @description The height of the video in pixels, where the video won't exceed its native height, no matter the value of this field.
355+
*/
356+
maxheight?: number;
357+
/**
358+
* @description The width of the video in pixels, where the video won't exceed its native width, no matter the value of this field.
359+
*/
360+
maxwidth?: number;
137361
}
138362

139363
export interface VimeoPlayerEventMap {
@@ -165,7 +389,7 @@ export interface VimeoPlayerEventMap {
165389
}
166390

167391
export declare class VimeoPlayer {
168-
constructor(element: HTMLIFrameElement | HTMLElement | string, options?: VimeoPlayerOptions);
392+
constructor(element: HTMLIFrameElement | HTMLElement | string, options?: EmbedOptions);
169393

170394
on<EventName extends keyof VimeoPlayerEventMap>(
171395
event: EventName,
@@ -180,7 +404,7 @@ export declare class VimeoPlayer {
180404

181405
loadVideo(id: number): Promise<number>;
182406
loadVideo(url: string): Promise<string>;
183-
loadVideo(options: VimeoPlayerOptions): Promise<{ [prop: string]: any }>;
407+
loadVideo(options: EmbedOptions): Promise<{ [prop: string]: any }>;
184408
ready(): Promise<void>;
185409
enableTextTrack(language: string, kind?: TrackKind): Promise<VimeoTextTrack>;
186410
disableTextTrack(): Promise<void>;

0 commit comments

Comments
 (0)