CloudflarePlayerApiTypes.d.ts

CloudflarePlayerApiTypes.d.ts

// from: https://developers.cloudflare.com/stream/viewing-videos/using-the-player-api
export type CfPlayer = {
	// methods
	play(): Promise<void>;
	pause(): void;
	addEventListener(
		eventName: CfPlayerEvents,
		listener: (...args: any[]) => void
	): void;
	removeEventListener(
		eventName: CfPlayerEvents,
		listener: (...args: any[]) => void
	): void;
	destroy(): void;
	hookBeacon(t: any): void;

	// properties (get + set)
	autoplay: boolean;
	readonly buffered: TimeRanges;
	controls: boolean; // show/hide
	currentTime: number; // seconds
	defaultTextTrack: any;
	readonly duration: number; // seconds
	readonly ended: boolean;
	loop: boolean;
	muted: boolean;
	readonly paused: boolean;
	readonly played: TimeRanges;
	preload: boolean | 'none';
	volume: number; // 0.0 – 1.0

	// undocumented
	playbackRate: number; // 0.25 – 2.0
	poster: string;
	src: string;
	videoWidth: number;
	videoHeight: number;
};

export type CfPlayerEvents = typeof CfValidPlayerEvents[number];
export const CfValidPlayerEvents: readonly [
	// events (standard) - https://developer.mozilla.org/en-US/docs/Web/Events#media
	'abort',
	'canplay',
	'canplaythrough',
	'durationchange',
	'ended',
	'error',
	'loadeddata',
	'loadedmetadata',
	'loadstart',
	'pause',
	'play',
	'playing',
	'progress',
	'ratechange',
	'seeked',
	'seeking',
	'stalled',
	'suspend',
	'timeupdate',
	'volumechange',
	'waiting',
	// events (non-standard)
	'stream-adstart',
	'stream-adend',
	'stream-adtimeout'
];

i use this type after including the cloudflare player api script in index.html like:

<script src="https://embed.videodelivery.net/embed/sdk.latest.js"></script>

or after importing the player api in code like:

...
loadCfPlayer() {
	console.log('loadCfPlayer');
	// async js import
	const script = document.createElement('script');
	script.src = 'https://embed.videodelivery.net/embed/sdk.latest.js';
	script.async = true;
	document.body.appendChild(script);

	script.addEventListener('load', () => {
		console.log('loaded cloudlare player api');
		this.initCfPlayer();
	});
},
initCfPlayer() {
	const player = Stream(document.getElementById('stream-player'));
	console.log('player', player);

	player.addEventListener('play', this.playHandler);
},
...

---

whichever way, my linter + code completion are happy if i add this to a global types declaration file (globals.d.ts) like so:

export {};

import { CfPlayer } from './typings';

declare global {
	function Stream(el: HTMLElement | null): CfPlayer;
}

for reference: the cloudflare player api