p5.js MediaElement duration() 方法

duration() 方法是 p5.js 中用于获取媒体元素（如视频、音频）持续时间的函数。它返回一个浮点数，表示媒体元素的持续时间，以秒为单位。

语法

duration()

返回值

duration() 方法返回一个浮点数，代表媒体元素的持续时间，以秒为单位。

示例

let myVideo;

function preload() {
  myVideo = createVideo('myVideo.mp4');
  myVideo.hide();
}

function setup() {
  createCanvas(600, 400);
  myVideo.loop();
}

function draw() {
  background(0);
  image(myVideo, 0, 0, width, height);

  textSize(20);
  fill(255);
  text(`Video Duration: ${myVideo.duration()}`, 10, 30);
}

解释

在这个例子中，我们创建了一个名为 myVideo 的视频元素，并使用 preload() 方法预加载。在 setup() 方法中，我们将视频设置为不间断播放，并在 draw() 方法中将其渲染到画布上。

要获取视频的持续时间并将其显示在画布上，我们使用 myVideo.duration() 方法。在此示例中，我们使用 text() 方法将持续时间以文本形式输出在画布的左上角。

注意事项

• duration() 方法仅适用于媒体元素（如视频、音频），不适用于其他类型的元素（如图像）。
• 在使用 duration() 方法之前，必须确保媒体元素已加载完成。
• 如果媒体元素尚未加载完成，则 duration() 方法将返回 NaN（非数字）。