p5.js | createVideo()函数

createVideo()函数用于在 DOM 中创建视频元素。视频被创建为 p5.MediaElement，它具有控制媒体及其播放的方法。

句法：

createVideo(src, callback)

参数：该函数接受上面提到的两个参数，如下所述：

• src：是一个字符串，指定视频文件的路径。字符串数组也可用于指定多个路径以支持不同的浏览器。
• 回调：这是一个回调函数，会在“canplaythrough”事件触发时触发。当视频完成加载并且不需要任何额外的缓冲时会触发此事件。它是一个可选参数。

返回值：它返回指向带有视频的 p5.MediaElement 的指针。

以下示例说明了 p5.js 中的createVideo()函数：

示例 1：

function setup() {
  createCanvas(300, 300);
  text("Click on the buttons below to"+
       " play/pause the video", 20, 20);
  
  vidElement = createVideo("sample_video.mp4");
  vidElement.position(20, 0);
  vidElement.size(300);
  
  playBtn = createButton("Play Video");
  playBtn.position(30, 40);
  playBtn.mouseClicked(playVideo);
  
  pauseBtn = createButton("Pause Video");
  pauseBtn.position(150, 40);
  pauseBtn.mouseClicked(pauseVideo);
}
  
function playVideo() {
  vidElement.play();
}
  
function pauseVideo() {
  vidElement.pause();
}

输出：

示例 2：

function setup() {
  createCanvas(300, 300);
  text("Loading the video...", 20, 20);
  
  vidElement = createVideo("sample_video.mp4", afterLoad);
  vidElement.position(20, 20);
  vidElement.size(300);
}
  
function afterLoad() {
  text("The video has finished loading and will"+
                           " now play!", 20, 40);
  vidElement.play();
}

输出：

在线编辑器： https://editor.p5js.org/

环境设置： https://www.geeksforgeeks.org/p5-js-soundfile-object-installation-and-methods/

参考： https://p5js.org/reference/#/p5/createVideo