Overview

Most developers use p5.js for drawing and creative coding, but the library also handles video playback from files and live camera streams. This guide covers the esssentials of working with video in p5.js.

Video File Playback

p5.js offers two approaches for video playback: rendering through a native <video> element or drawing frames onto a <canvas> using the image function.

Method 1: Native Video Element

The createVideo() function generates a <video> DOM element.

Basic Syntax:

createVideo(sources, [onReady])

Parameters:

• sources: Required. Either a string pointing to a video file, or an array of strings for fallback support across browsers.
• onReady: Optioanl. A callback that fires once the video finishes loading.

Complete Example:

let isPlaying = false
let vid = null
let toggleBtn = null

function preload() {
  vid = createVideo('assets/demo.mp4', handleLoad)
}

function handleLoad() {
  console.log('Video ready')
}

function setup() {
  noCanvas()
  toggleBtn = createButton('Play')
  toggleBtn.mousePressed(switchPlayback)
}

function switchPlayback() {
  if (isPlaying) {
    vid.pause()
    toggleBtn.html('Play')
  } else {
    vid.loop()
    toggleBtn.html('Pause')
  }
  isPlaying = !isPlaying
}

Key points:

• Place resource loading in preload() to ensure assets load before the sketch starts
• noCanvas() removes the default canvas since the <video> element provides its own display
• loop() repeats playback; play() plays once then pauses
• Use pause() to halt playback

Specifying Multiple Sources:

vid = createVideo(['video.webm', 'video.mp4', 'video.ogv'])

Passing an array lets browsers select a supported format, serving as a compatibility fallback.

Adjusting Dimensions:

function preload() {
  vid = createVideo('assets/demo.mp4')
  vid.size(400, 800)
}

Controlling Volume:

function preload() {
  vid = createVideo('assets/demo.mp4', ready)
}

function ready() {
  vid.volume(0.3)
}

The volume parameter accepts values between 0 (muted) and 1 (maximum).

Method 2: Rendering to Canvas

p5.js can draw video frames onto the canvas, giving you full control over composition and styling.

let isPlaying = false
let vid = null
let toggleBtn = null

function preload() {
  vid = createVideo('assets/demo.mp4')
}

function setup() {
  createCanvas(568, 320)
  vid.hide()
  toggleBtn = createButton('Play')
  toggleBtn.mousePressed(switchPlayback)
}

function draw() {
  image(vid, 0, 0)
}

function switchPlayback() {
  if (isPlaying) {
    vid.pause()
    toggleBtn.html('Play')
  } else {
    vid.loop()
    toggleBtn.html('Pause')
  }
  isPlaying = !isPlaying
}

The hide() method removes the default <video> element from the DOM since frames render directly to canvas. The draw() loop continuously calls image() to update the display.

Camera Integration

p5.js can access webcam streams and display them on the canvas.

let camFeed

function setup() {
  createCanvas(480, 360)
  camFeed = createCapture(VIDEO)
  camFeed.hide()
}

function draw() {
  image(camFeed, 0, 0, camFeed.width, camFeed.height)
}

createCapture(VIDEO) returns a <video> element containing the camera stream. Hiding this element prevents duplicate displays since the content renders through image(). The canvas resizes automatically to match the capture dimensions unless constrained by createCanvas().

Common Video Methods