---
title: HTMLMediaElement.play()
slug: Web/API/HTMLMediaElement/play
translation_of: Web/API/HTMLMediaElement/play
---
<div>{{APIRef("HTML DOM")}}</div>

<p><span class="seoSummary">El método <code>play()</code> de {{domxref("HTMLMediaElement")}} intenta comenzar la reproducción de los medios. Devuelve una promesa ({{jsxref("Promise")}}) que se resuelve cuando la reproducción se ha iniciado con éxito.</span> Si no se inicia la reproducción por cualquier motivo, como problemas de permisos, la promesa será rechazada.</p>

<h2 id="Sintaxis">Sintaxis</h2>

<pre class="syntaxbox">var <em>promesa</em> = <em>HTMLMediaElement</em>.play();</pre>

<h3 id="Parametros">Parametros</h3>

<p>Ninguno.</p>

<h3 id="Valor_de_retorno">Valor de retorno</h3>

<p>Es una promesa({{jsxref("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.</p>

<div class="note">
<p><strong>Nota:</strong> Los navegadores más antiguos pueden no devolver un valor de <code>play()</code>.</p>
</div>

<h3 id="Excepciones">Excepciones</h3>

<p>El <strong>controlador de rechazo</strong> 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:</p>

<dl>
 <dt><code>NotAllowedError</code>( <em>Error no permitido</em>)</dt>
 <dd>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".</dd>
 <dt>NotSupportedError(<em> Error no admitido</em>)</dt>
 <dd>La fuente de medios (que puede especificarse como {{domxref("MediaStream")}}, {{domxref("MediaSource")}}, {{domxref("Blob")}}, o {{domxref("File")}}) no representa un formato de medios compatible.</dd>
</dl>

<p>Se pueden informar otras excepciones, según los detalles de implementación del navegador, la implementación del reproductor de medios, etc.</p>

<h2 id="Notas">Notas</h2>

<p>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 <code>play()</code>.</p>

<p>Si el {{Glossary("user agent")}} está configurado para no permitir la reproducción automática o iniciada por script de medios, llamando el método <code>play()</code> hara que la promesa devuelta sea rechazada inmediatamente con un <code>NotAllowedError</code>. 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 {{anch("Example", "Ejemplo")}} abajo para más información.</p>

<div class="note">
<p><strong>Nota:</strong> El método <code>play()</code> 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.</p>
</div>

<p>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 <a href="/en-US/docs/Web/Media/Autoplay_guide">Guía de reproducción automática para medios y API de audio web</a>.</p>

<h2 id="Ejemplo">Ejemplo</h2>

<p>Este ejemplo muestra cómo confirmar que la reproducción ha comenzado y cómo manejar adecuadamente la reproducción automática bloqueada:</p>

<pre class="brush: js">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 = "";
  }
}</pre>

<p>En este ejemplo, la reproducción de video se activa y desactiva por la función <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/async_function">async</a></code> <code>playVideo()</code>. Intenta reproducir el video y, si tiene éxito, establece el nombre de clase del elemento <code>playButton</code> en "playing". Si la reproducción no se inicia, la clase del elemento <code>playButton</code> 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 {{jsxref("Promise")}} devuelto por el método <code>play()</code>.</p>

<p>Cuando se ejecuta este ejemplo, comienza recogiendo referencias al elemento {{HTMLElement("video")}}, así como al {{HTMLElement("button")}} utilizado para activar y desactivar la reproducción. Luego configura un controlador de eventos para el evento {{event("click")}} en el botón de alternancia de reproducción e intenta comenzar automáticamente la reproducción llamando al método <code>playVideo()</code>.</p>

<p>Puedes <a href="https://media-play-promise.glitch.me/">probar o remezclar este ejemplo en tiempo real en Glitch</a>.</p>

<h2 id="Especificaciones">Especificaciones</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th>Especificación</th>
   <th>Estatus</th>
   <th>Comentarios</th>
  </tr>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'embedded-content.html#dom-media-play', 'play()')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td>Initial definition; living specification.</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C','embedded-content-0.html#dom-media-play','play()')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td>Initial definition.</td>
  </tr>
 </tbody>
</table>

<div class="note">
<p><strong>Nota:</strong> 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 {{jsxref("Promise")}} o nada en absoluto, respectivamente.</p>
</div>

<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>

<div class="hidden">La tabla de compatibilidad en esta página se genera a partir de datos estructurados. Si desea contribuir con los datos, consulte <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíenos un pull request.</div>

<p>{{Compat("api.HTMLMediaElement.play")}}</p>

<h2 id="Ver_también">Ver también</h2>

<ul>
 <li><a href="/en-US/docs/Web/Media">Web media technologies</a></li>
 <li>Learning: <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Video and audio content</a></li>
 <li><a href="/en-US/docs/Web/Media/Autoplay_guide">Autoplay guide for media and Web Audio APIs</a></li>
 <li><a href="/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li>
</ul>