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。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。