Skip to main content
Beta — @videojs/utils is close to stable. Experimental adoption in real projects is welcome.
@videojs/utils provides the shared utility functions used across every package in the Video.js monorepo. It is the lowest-level dependency in the stack, with no Video.js runtime dependencies of its own. 
utils ← store ← core ← html / react / react-native

​
Installation

npm install @videojs/utils

​
Exports

Entry pointDescription
./predicateType-safe predicate functions (isUndefined, isNull, isFunction, isString, isObject)
./domDOM helpers (listen, animationFrame, idleCallback, onEvent)
./arrayArray utilities
./eventsEvent utilities
./functionFunction utilities
./objectObject utilities
./stringString utilities
./styleCSS style utilities
./timeTime formatting utilities
./numberNumber utilities
./typesShared TypeScript types

​
Predicate utilities (./predicate)

Type-safe narrowing predicates used throughout the codebase. Always prefer these over inline typeof checks: 
import { isUndefined, isNull, isFunction, isString, isObject } from '@videojs/utils/predicate';

isUndefined(value)   // value is undefined
isNull(value)        // value is null
isFunction(value)    // value is a function
isString(value)      // value is a string
isObject(value)      // value is a non-null object
Each function returns a type predicate for proper TypeScript narrowing: 
function process(handler: unknown) {
  if (isFunction(handler)) {
    handler(); // TypeScript knows handler is a function here
  }
}
Instead ofUse
x === undefinedisUndefined(x)
x === nullisNull(x)
typeof x === 'function'isFunction(x)
typeof x === 'string'isString(x)

​
DOM helpers (./dom)

Browser-specific utilities for events, animation frames, and idle callbacks. All return cleanup functions and support AbortSignal: 
import { listen, animationFrame, idleCallback, onEvent } from '@videojs/utils/dom';

// Add an event listener with a cleanup function
const unlisten = listen(element, 'click', handler);
unlisten(); // removes the listener

// Works with AbortController for managing multiple cleanups
const ac = new AbortController();
listen(element, 'click', handler, { signal: ac.signal });
listen(element, 'keydown', handler, { signal: ac.signal });
ac.abort(); // removes all listeners at once

// Request an animation frame with cleanup
const cancel = animationFrame((timestamp) => {
  // runs on next frame
});
cancel(); // cancels if not yet called

// Schedule work during idle time
const cancelIdle = idleCallback((deadline) => {
  // runs when the browser is idle
});

// Wait for an event to fire (Promise-based)
const event = await onEvent(video, 'canplay');
FunctionReturnsDescription
listen(target, event, handler, options?)() => voidAdds an event listener, returns a cleanup function
animationFrame(callback)() => voidSchedules requestAnimationFrame, returns a cancel function
idleCallback(callback)() => voidSchedules requestIdleCallback, returns a cancel function
onEvent(target, event)Promise<Event>Returns a promise that resolves when the event fires

​
No runtime dependencies

@videojs/utils has no runtime dependencies. All exports are tree-shakeable ("sideEffects": false).

@videojs/store

State management that depends on utils.

@videojs/core

Core logic that depends on utils.

@videojs/spf

Stream Processing Framework that depends on utils.

@videojs/html

HTML player that depends on utils.

Build docs developers (and LLMs) love

Get started for freeTalk to us