• Public
  • Public/Protected
  • All

A helper class to provide common functionality for working with HTML5 video objects A singleton instance of this class is available as game.video


  • VideoHelper




pending: Set<any>

A user gesture must be registered before video playback can begin. This Set records the video elements which await such a gesture.

thumbs: Map<string, string>

A mapping of base64 video thumbnail images

locked: boolean

A flag for whether video playback is currently locked by awaiting a user gesture

#youTubeReady: Promise<any>

Store a Promise while the YouTube API is initializing.

#youTubeRegex: RegExp = ...

The YouTube URL regex.


  • getSourceElement(mesh: any): HTMLImageElement | HTMLVideoElement
  • Return the HTML element which provides the source for a loaded texture.


    • mesh: any

      The rendered mesh

    Returns HTMLImageElement | HTMLVideoElement

    The source HTML element

  • getVideoSource(object: any): HTMLVideoElement
  • Get the video element source corresponding to a Sprite or SpriteMesh.


    • object: any

      The PIXI source

    Returns HTMLVideoElement

    The source video element or null

  • cloneTexture(source: HTMLVideoElement): Promise<Texture>
  • Clone a video texture so that it can be played independently of the original base texture.


    • source: HTMLVideoElement

      The video element source

    Returns Promise<Texture>

    An unlinked PIXI.Texture which can be played independently

  • play(video: HTMLElement, [options={}]?: { playing: boolean; loop: boolean; offset: number; volume: number }): Promise<any>
  • Play a single video source If playback is not yet enabled, add the video to the pending queue


    • video: HTMLElement

      The VIDEO element to play

    • [options={}]: { playing: boolean; loop: boolean; offset: number; volume: number } = {}

      Additional options for modifying video playback

      • playing: boolean
      • loop: boolean
      • offset: number
      • volume: number

    Returns Promise<any>

  • stop(video: HTMLElement): void
  • Stop a single video source


    • video: HTMLElement

      The VIDEO element to stop

    Returns void

  • awaitFirstGesture(): void
  • Register an event listener to await the first mousemove gesture and begin playback once observed A user interaction must involve a mouse click or keypress. Listen for any of these events, and handle the first observed gesture.

    Returns void

  • _onFirstGesture(event: Event): void
  • Handle the first observed user gesture We need a slight delay because unfortunately Chrome is stupid and doesn't always acknowledge the gesture fast enough.


    • event: Event

      The mouse-move event which enables playback

    Returns void

  • createThumbnail(src: string, options: any): Promise<string>
  • Create and cache a static thumbnail to use for the video. The thumbnail is cached using the video file path or URL.


    • src: string

      The source video URL

    • options: any

      Thumbnail creation options, including width and height

    Returns Promise<string>

    The created and cached base64 thumbnail image, or a placeholder image if the canvas is disabled and no thumbnail can be generated.

  • getYouTubePlayer(id: string, config?: any): Promise<Player>
  • getYouTubeId(url: string): string
  • Retrieve a YouTube video ID from a URL.


    • url: string

      The URL.

    Returns string

  • getYouTubeEmbedURL(url: string, vars?: any): string
  • Take a URL to a YouTube video and convert it into a URL suitable for embedding in a YouTube iframe.


    • url: string

      The URL to convert.

    • vars: any = {}

      YouTube player parameters.

    Returns string

    The YouTube embed URL.

  • isYouTubeURL(url?: string): boolean
  • Test a URL to see if it points to a YouTube video.


    • url: string = ""

      The URL to test.

    Returns boolean

  • #injectYouTubeAPI(): Promise<any>
  • Inject the YouTube API into the page.

    Returns Promise<any>

    A Promise that resolves when the API has initialized.

  • hasVideoExtension(src: any): boolean
  • Parameters

    • src: any

    Returns boolean