La función createVideo() se usa para crear un elemento de video en el DOM. El video se crea como p5.MediaElement, que tiene métodos para controlar los medios y su reproducción.
Sintaxis:
createVideo(src, callback)
Parámetros: esta función acepta dos parámetros, como se mencionó anteriormente y se describe a continuación:
- src: es una string que especifica la ruta del archivo de video. También se puede usar una array de strings para especificar múltiples rutas para admitir diferentes navegadores.
- devolución de llamada: es una función de devolución de llamada que se activará cuando se active el evento ‘canplaythrough’ . Este evento se activa cuando el video ha terminado de cargarse y no requiere ningún almacenamiento en búfer adicional. Es un parámetro opcional.
Valor de retorno: Devuelve un puntero al p5.MediaElement con el video.
Los siguientes ejemplos ilustran la función createVideo() en p5.js:
Ejemplo 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(); }
Producción:
Ejemplo 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(); }
Producción:
Editor en línea: https://editor.p5js.org/
Configuración del entorno: https://www.geeksforgeeks.org/p5-js-soundfile-object-installation-and-methods/
Referencia: https://p5js.org/reference/#/p5/createVideo
Publicación traducida automáticamente
Artículo escrito por sayantanm19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA