当前位置: 首页>>代码示例 >>用法及示例精选 >>正文


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


p5.j​​s中p5.MediaElement的time()方法用于设置或返回媒体元素的当前时间。它接受一个参数,该参数表示媒体应跳至或跳至的时间(以秒为单位)。可以通过不向函数传递任何参数来返回媒体的当前时间。

用法:

time( time )

参数:此方法接受如上所述和以下描述的单个参数:

  • time:它是一个数字,指定媒体应跳至的时间(以秒为单位)。它是一个可选参数。

返回值:此方法返回一个Number,表示媒体元素的当前时间。

以下示例说明了p5.js中的time()方法:



例:

Javascript

function setup() { 
    createCanvas(500, 400); 
    textSize(18); 
  
    text("Click on the buttons to skip " + 
         "the video forward or backward", 
         20, 20); 
  
    example_media = 
      createVideo("sample-video.mp4"); 
    example_media.size(500, 300); 
    example_media.position(20, 100); 
    example_media.showControls(); 
  
    skipbwdBtn = 
      createButton("Skip Back 2 Seconds"); 
    skipbwdBtn.position(30, 40); 
    skipbwdBtn.mousePressed(skipBackward); 
  
    skipfwdBtn = 
      createButton("Skip Forward 2 Seconds"); 
    skipfwdBtn.position(200, 40); 
    skipfwdBtn.mousePressed(skipForward); 
} 
  
function skipForward() { 
  clear(); 
  
  // Get the current time 
  let currTime = example_media.time(); 
  
  // Add 2 seconds to skip forward 
  let fwdTime = currTime + 2; 
  
  // Set the new time that is two seconds 
  // after the current time 
  example_media.time(fwdTime); 
  
  text("The video has been skipped forward", 
       20, 80); 
  
  text("Click on the buttons to skip " +  
       "the video forward or backward", 
       20, 20); 
} 
  
function skipBackward() { 
  clear(); 
  
  // Get the current time 
  let currTime = example_media.time(); 
  
  // Subtract 2 seconds to skip back 
  let fwdTime = currTime - 2; 
  
  // Set the new time that is two seconds 
  // before the current time 
  example_media.time(fwdTime); 
  
  text("The video has been skipped back", 
       20, 80); 
  
  text("Click on the buttons to skip " + 
       "the video forward or backward", 
       20, 20); 
}

输出:

在线编辑: https://editor.p5js.org/
环境设置: https://www.geeksforgeeks.org/p5-js-soundfile-object-installation-and-methods/
参考:https://p5js.org/reference/#/p5.MediaElement/time

相关用法


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