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


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


p5.j​​s库的p5.MediaElement的addCue()方法用于安排某个事件,只要媒体元素到达指定的提示点,便触发该事件。它接受一个回调函数,该函数可用于指定事件期间应执行的操作。也可以使用此方法将可选参数传递给回调函数。

用法:

addCue( time, callback, value)

参数:该函数接受上面提到和下面描述的三个参数。

  • time:它是一个数字,指定相对于媒体元素的时间(以秒为单位),在该时间之后将调用给定的回调函数。
  • callback:这是在给定时间调用的函数。
  • value:这是一个作为参数传递给回调函数的对象。它是一个可选参数。

返回值:此方法返回一个数字,该数字表示添加的提示的“id”。这可用于以后访问或删除提示。

范例1:以下示例说明了p5.js库的addCue()方法。



Javascript

function setup() { 
  createCanvas(550, 400); 
  textSize(18); 
  
  text("The events in addCue() are called " + 
       "according to the given time", 20, 20); 
  
  example_media = 
    createVideo("sample-video.mp4"); 
  example_media.size(426, 240); 
  example_media.position(20, 60); 
  example_media.showControls(); 
  
  // Using the addCue() method for specifying 
  // the time that the callback function 
  // would be called 
  example_media.addCue(3, showTime, 
                       example_media); 
  example_media.addCue(5, showTime, 
                       example_media); 
  example_media.addCue(8, showTime, 
                       example_media); 
  example_media.addCue(10, showTime, 
                       example_media); 
} 
  
function showTime(media) { 
  
  // Set a random background color 
  r = random(255); 
  g = random(255); 
  b = random(255); 
  background(r, g, b); 
  
  // Get the media element from the callback 
  let mediaTime = media.time(); 
  
  text("The current time of the video is:" + 
       mediaTime, 20, 340); 
  
    text("The events in addCue() are called " + 
       "according to the given time", 20, 20); 
}

输出:

范例2:

Javascript

let y = 0; 
  
function setup() { 
  createCanvas(550, 400); 
  textSize(18); 
  
  text("The addCue() function is called " + 
       "according to the given time", 20, 20); 
  
  example_media = 
    createVideo("sample-video.mp4"); 
  example_media.size(426, 240); 
  example_media.position(20, 60); 
  example_media.showControls(); 
  
  // Using the addCue() method for specifying 
  // the time that the callback function 
  // would be called 
  example_media.addCue(3, changePlaySpeed, 
                       0.15); 
  example_media.addCue(5, changePlaySpeed, 
                       1.0); 
  example_media.addCue(8, changePlaySpeed, 
                       3.0); 
} 
  
function changePlaySpeed(amount) { 
  
  // Get the amount from the callback 
  example_media.speed(amount); 
  
  text("The current speed of the video is:"
       + amount, 20, y + 340); 
  
  y += 20; 
}

输出:

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

相关用法


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