p5.js createVideo()用法及代码示例

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

用法:

createVideo(src, callback)

参数：该函数接受上述和以下描述的两个参数：

src:它是指定视频文件路径的字符串。字符串数组也可以用于指定多个路径以支持不同的浏览器。
callback:这是一个回调函数，将在触发“ 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(); 
}

输出：
play-pause-video

范例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(); 
}

输出：

callback-video

在线编辑：

环境设置：

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

相关用法

注：本文由纯净天空筛选整理自sayantanm19大神的英文原创作品 p5.js | createVideo() Function。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。