画布上的视频

通过使用 createVideo() 和 image() 函数，你可以将视频上传到画布中。由于视频捕捉是通过 image() 构造函数传递的，你可以使用 filter() 方法给视频捕捉添加滤镜。要在本地运行这个示例，你需要一个正在运行的本地服务器。如果想要构建一个不在画布内嵌入的视频，请参见视频示例。

// Define video and playing as global variables.

// Set playing to false so the videos are paused when loaded into the canvas.

let video;

let playing = false;

function setup() {

createCanvas(710, 400);

// Upload the video in the canvas's assets directory, and

// use the createVideo() function to load the video into the code.

// It's best to upload multiple video formats so the video

// is visible within different browsers.

video = createVideo(['/assets/fingers.mov', '/assets/fingers.webm']);

// By default, the video will render as its own DOM element.

// Use the hide() method to remove the DOM instance of the video.

video.hide();

}

function draw() {

describe(

'Two videos in the top right and bottom center of the canvas, with the text "Click the canvas to start and pause the video feed." in the top left corner.'

);

background(240);

// Add instructional text to the top right of the canvas.

textSize(16);

text('Click the canvas to start and pause the video feed.', 345, 50);

// Draw the first instance of the video in the canvas.

image(video, 10, 10);

// Add a gray filter to the existing elements on the canvas.

filter(GRAY);

// Draw the second instance of the video.

image(video, 150, 150);

}