HTMLMediaElement.play()

El m茅todo play() de HTMLMediaElement intenta comenzar la reproducci贸n de los medios. Devuelve una promesa (Promise) que se resuelve cuando la reproducci贸n se ha iniciado con 茅xito. Si no se inicia la reproducci贸n por cualquier motivo, como problemas de permisos, la promesa ser谩 rechazada.

Sintaxis

var promesa = HTMLMediaElement.play();

Parametros

Ninguno.

Valor de retorno

Es una promesa(Promise) que se resuelve cuando se inicia la reproducci贸n, o se rechaza si por alg煤n motivo no se puede iniciar la reproducci贸n.

Nota: Los navegadores m谩s antiguos pueden no devolver un valor de play().

Excepciones

El controlador de rechazo de la promesas se llama con un nombre de excepci贸n pasado como su 煤nico par谩metro de entrada (a diferencia de una excepci贸n tradicional que se lanza). Los posibles errores incluyen:

NotAllowedErrorError no permitido)
El agente de usuario(navegador) o el sistema operativo no permiten la reproducci贸n de medios en el contexto o situaci贸n actual. Esto puede suceder, por ejemplo, si el navegador requiere que el usuarion inicie expl铆citamente la reproducci贸n de medios haciendo clic en el bot贸n "reproducir".
NotSupportedError( Error no admitido)
La fuente de medios (que puede especificarse como MediaStream (en-US), MediaSource, Blob, o File) no representa un formato de medios compatible.

Se pueden informar otras excepciones, seg煤n los detalles de implementaci贸n del navegador, la implementaci贸n del reproductor de medios, etc.

Notas

Aunque generalmente se considera que el t茅rmino "reproducci贸n autom谩tica" se refiere a p谩ginas que comienzan a reproducir contenido multimedia inmediatamente despu茅s de cargarse, las pol铆ticas de reproducci贸n autom谩tica de los navegadores web tambi茅n se aplican a cualquier reproducci贸n de contenido multimedia que inicia por script, incluidas las llamadas a el m茅todo play().

Si el user agent est谩 configurado para no permitir la reproducci贸n autom谩tica o iniciada por script de medios, llamando el m茅todo play() hara que la promesa devuelta sea rechazada inmediatamente con un NotAllowedError. Los sitios web deben estar preparados para manejar esta situaci贸n. Por ejemplo, un sitio no debe presentar una interfaz de usuario que suponga que la reproducci贸n ha comenzado autom谩ticamenta, sino que debe actualizar su interfaz de usuario en funci贸n de si la promesa devuelta se resulve o se rechaza. Mira el Ejemplo abajo para m谩s informaci贸n.

Nota: El m茅todo play() puede hacer que se le pida al usuario que otorgue permiso para reproducir medios, lo que puede ocacionar un posible retraso antes de que se resuelva la promesa devuelta. Aseg煤rese de que su c贸digo no espere una  respuesta inmediata.

Para obtener informaci贸n m谩s detallada sobre la reproducci贸n autom谩tica y el bloqueo de reproducci贸n autom谩tica, consulte nuestro art铆culo Gu铆a de reproducci贸n autom谩tica para medios y API de audio web.

Ejemplo

Este ejemplo muestra c贸mo confirmar que la reproducci贸n ha comenzado y c贸mo manejar adecuadamente la reproducci贸n autom谩tica bloqueada:

let videoElem = document.getElementById("video");
let playButton = document.getElementById("playbutton");

playButton.addEventListener("click", handlePlayButton, false);
playVideo();

async function playVideo() {
  try {
    await videoElem.play();
    playButton.className = "playing";
  } catch(err) {
    playButton.className = "";
  }
}

function handlePlayButton() {
  if (videoElem.paused) {
    playVideo();
  } else {
    videoElem.pause();
    playButton.className = "";
  }
}

En este ejemplo, la reproducci贸n de video se activa y desactiva por la funci贸n async playVideo(). Intenta reproducir el video y, si tiene 茅xito, establece el nombre de clase del elemento playButton en "playing". Si la reproducci贸n no se inicia, la clase del elemento playButton se borra, restaurando su apariencia predeterminada. Esto garantiza que el b贸ton de reproducci贸n coincida con el estado real de reproducci贸n al observar la resoluci贸n o el rechazo de Promise devuelto por el m茅todo play().

Cuando se ejecuta este ejemplo, comienza recogiendo referencias al elemento <video>, as铆 como al <button> utilizado para activar y desactivar la reproducci贸n. Luego configura un controlador de eventos para el evento click en el bot贸n de alternancia de reproducci贸n e intenta comenzar autom谩ticamente la reproducci贸n llamando al m茅todo playVideo().

Puedes probar o remezclar este ejemplo en tiempo real en Glitch.

Especificaciones

Especificaci贸n Estatus Comentarios
HTML Living Standard
La definici贸n de 'play()' en esta especificaci贸n.
Living Standard Initial definition; living specification.
HTML5
La definici贸n de 'play()' en esta especificaci贸n.
Recommendation Initial definition.

Nota: Las versiones WHATWG y W3C de la especificaci贸n difieren (a partir de agosto de 2018) en cuanto a si este m茅todo devuelve una Promise o nada en absoluto, respectivamente.

Compatibilidad con navegadores

BCD tables only load in the browser

Ver tambi茅n