diff options
author | Florian Merz <me@fiji-flo.de> | 2021-02-11 14:46:50 +0100 |
---|---|---|
committer | Florian Merz <me@fiji-flo.de> | 2021-02-11 14:46:50 +0100 |
commit | a55b575e8089ee6cab7c5c262a7e6db55d0e34d6 (patch) | |
tree | 5032e6779a402a863654c9d65965073f09ea4182 /files/es/web/html/usando_audio_y_video_con_html5 | |
parent | 8260a606c143e6b55a467edf017a56bdcd6cba7e (diff) | |
download | translated-content-a55b575e8089ee6cab7c5c262a7e6db55d0e34d6.tar.gz translated-content-a55b575e8089ee6cab7c5c262a7e6db55d0e34d6.tar.bz2 translated-content-a55b575e8089ee6cab7c5c262a7e6db55d0e34d6.zip |
unslug es: move
Diffstat (limited to 'files/es/web/html/usando_audio_y_video_con_html5')
-rw-r--r-- | files/es/web/html/usando_audio_y_video_con_html5/index.html | 287 |
1 files changed, 0 insertions, 287 deletions
diff --git a/files/es/web/html/usando_audio_y_video_con_html5/index.html b/files/es/web/html/usando_audio_y_video_con_html5/index.html deleted file mode 100644 index 77810a8e65..0000000000 --- a/files/es/web/html/usando_audio_y_video_con_html5/index.html +++ /dev/null @@ -1,287 +0,0 @@ ---- -title: Usando audio y video con HTML5 -slug: Web/HTML/Usando_audio_y_video_con_HTML5 -tags: - - Flash - - Ogg - - applet - - busqueda - - errores - - especificacion - - gestion - - opciones - - reproduccion - - reserva -translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content -translation_of_original: Web/Guide/HTML/Using_HTML5_audio_and_video ---- -<p>HTML5 introduce soporte integrado para el contenido multimedia gracias a los elementos {{ HTMLElement("audio") }} y {{ HTMLElement("video") }}, ofreciendo la posibilidad de insertar contenido multimedia en documentos HTML.</p> - -<h2 id="Insertando_contenido_multimedia">Insertando contenido multimedia</h2> - -<p>Insertar contenido multimedia en tus documentos HTML es muy sencillo:</p> - -<div style="overflow: hidden;"> -<pre class="brush: html"><video src="http://v2v.cc/~j/theora_testsuite/320x240.ogg" controls> - Tu navegador no implementa el elemento <code>video</code>. -</video></pre> - -<p>Este ejemplo reproduce un vídeo de ejemplo, con los controles de reproducción, desde el sitio Web de Theora.</p> - -<p>Este es un ejemplo para insertar <em>audio</em> en tu documento HTML</p> - -<pre class="brush: html"><audio src="/test/audio.ogg"> -<p>Tu navegador no implementa el elemento audio.</p> -</audio></pre> -</div> - -<p>El atributo <code>src</code> puede ser una URL del archivo de audio o la ruta al archivo en el sistema local.</p> - -<div style="overflow: hidden;"> -<pre class="brush: html"><audio src="audio.ogg" controls autoplay loop> -<p>Tu navegador no implementa el elemento audio</p> -</audio></pre> -</div> - -<p>Este código de ejemplo usa los atributos del elemento {{ HTMLElement("audio") }}:</p> - -<ul> - <li><code>controls</code> : muestra los controles estándar de HTML5 para audio en una página web.</li> - <li><code>autoplay</code> : hace que el audio se reproduzca automáticamente.</li> - <li><code>loop</code> : hace que el audio se repita automáticamente.</li> -</ul> - -<div style="overflow: hidden;"> -<pre class="brush: html"><audio src="audio.mp3" preload="auto" controls></audio></pre> -</div> - -<p>El atributo <code>preload</code> es usado en el elemento audio para almacenar temporalmente (buffering) archivos de gran tamaño. Este puede tomar uno de 3 valores:</p> - -<ul> - <li><code>"none"</code> no almacena temporalmente el archivo</li> - <li><code>"auto"</code> almacena temporalmente el archivo multimedia</li> - <li><code>"metadata"</code> almacena temporalmente sólo los metadatos del archivo</li> -</ul> - -<p>Se pueden especificar múltiples fuentes de archivos usando el elemento {{ HTMLElement("source") }} <span id="result_box" lang="es"><span class="hps">con el fin de</span> <span class="hps">proporcionar vídeo</span> <span class="hps">o</span> <span class="hps">audio</span> <span class="hps">codificados en formatos</span> <span class="hps">diferentes</span> <span class="hps">para</span> <span class="hps">diferentes navegadores</span></span>. Por ejemplo:</p> - -<pre class="brush: html"><video controls> - <source src="foo.ogg" type="video/ogg"> - <source src="foo.mp4" type="video/mp4"> - Tu navegador no implementa el elemento <code>video</code>. -</video> -</pre> - -<p>Esto reproduce el archivo Ogg en navegadores que admiten el formato Ogg. Si el navegador no admite Ogg, el navegador usará el archivo MPEG-4. Mira también la lista de <a href="/en-US/docs/Media_formats_supported_by_the_audio_and_video_elements" title="Media formats supported by the audio and video elements">los formatos multimedia admitidos por los elementos audio y video</a> en los diferentes navegadores.</p> - -<p>También puedes especificar qué codecs requiere el archivo multimedia; de esta forma el navegador tomará decisiones más inteligentes:</p> - -<pre class="brush: html"><video controls> - <source src="foo.ogg" type="video/ogg; codecs=dirac, speex"> - Tu navegador no implementa el elemento <code>video</code>. -</video></pre> - -<p>Aquí, especificamos que el vídeo usa los codecs Dirac y Speex. Si el navegador implementa Ogg, pero no los codecs especificados, el vídeo no será cargado.</p> - -<p>Si el atributo <code>type</code> no está especificado, el tipo de contenido multimedia se obtiene del servidor <span id="result_box" lang="es"><span class="hps">y</span> se <span class="hps">comprueba para</span> <span class="hps">ver</span> <span class="hps">si el navegador</span> <span class="hps">lo puede manejar</span></span>; si no puede ser mostrado, se comprueba el siguiente <code>source</code> , si ninguno de los elementos <code>source</code> especificados pueden ser usados, un evento de <code>error</code> es enviado al elemento <code>video</code>. Si el atributo <code>type</code> está especificado, es comparado con los tipos que el navegador puede reproducir, y si no es reconocido, no se hace la consulta al servidor; en su lugar, el siguiente <code>source</code> se comprueba una vez.</p> - -<p>Mira <a href="/en-US/docs/DOM/Media_events" title="https://developer.mozilla.org/en/DOM/Media_events">los eventos del contenido multimedia</a> para una lista completa de eventos asociados con la producción multimedia. Para detalles en los formatos multimedia soportados por los diferentes navegadores, mira <a href="/en-US/docs/Media_formats_supported_by_the_audio_and_video_elements" title="Media formats supported by the audio and video elements">los formatos multimedia sportados por los elementos audio y video</a>.</p> - -<h2 id="Controlando_la_reproducción_multimedia">Controlando la reproducción multimedia</h2> - -<p>Una vez que has incrustado el contenido multimedia en tu documento HTML usando los nuevos elementos, puedes controlarlos mediante programación en JavaScript. Por ejemplo, para iniciar (o reiniciar) la reproducción, puedes hacer esto:</p> - -<pre class="brush: js">var v = document.getElementsByTagName("video")[0]; -v.play(); -</pre> - -<p>La primera línea obtiene el primer elemento video en el documento, y la segunda línea llama al método <a href="/en-US/docs/XPCOM_Interface_Reference/NsIDOMHTMLMediaElement#play()" title="nsIDOMHTMLMediaElement#play()"><code>play()</code></a> del elemento, como está definido en la interfaz {{ interface("nsIDOMHTMLMediaElement") }} que es usada para implementar los elementos multimedia.</p> - -<p>Controlar un reproductor de audio en HTML5 para reproducir, pausar, aumentar y disminuir el volumen usando algo de Javascript es muy sencillo.</p> - -<pre class="brush: html"><audio id="demo" src="audio.mp3"></audio> -<div> - <button onclick="document.getElementById('demo').play()">Reproducir el Audio</button> - <button onclick="document.getElementById('demo').pause()">Pausar el Audio</button> - <button onclick="document.getElementById('demo').volume+=0.1">Aumentar el Volumen</button> - <button onclick="document.getElementById('demo').volume-=0.1">Disminuir el Volumen</button> -</div> -</pre> - -<h2 id="Deteniendo_la_descarga_de_contenido_multimedia">Deteniendo la descarga de contenido multimedia</h2> - -<p>Mientras que detener la reproducción multimedia es tan fácil como llamar al método pause() del elemento, el navegador sigue descargando el contenido multimedia hasta que el elemento multimedia es eliminado <span id="result_box" lang="es"><span class="hps">a través de</span> <span class="hps">la recolección de basura</span></span>.</p> - -<p>Aquí un truco para detener la descarga de una sola vez:</p> - -<pre class="brush: js">var mediaElement = document.getElementById("myMediaElementID"); -mediaElement.pause(); -mediaElement.src = ""; -</pre> - -<p>Estableciendo una cadena vacía al atributo <code>src</code> del elemento multimedia, tu destruyes el decodificador interno del elemento con lo que detienes la descarga.</p> - -<h2 id="Buscando_a_través_de_los_medios" style="margin: 0px 0px 0.8em; padding: 0px;">Buscando a través de los medios</h2> - -<p style="margin: 0px 0px 1.286em; padding: 0px; line-height: 1.5em;"><font>Los elementos de los medios proporcionan apoyo para mover la posición de reproducción actual a puntos específicos en el contenido de los medios. </font>Esto se hace estableciendo el valor de la propiedad <code style="font-size: 14px;">horaActual</code> en el elemento; ver <a class="new" href="https://developer.mozilla.org/es/docs/Web/API/HTMLMediaElement" title="/ Es / docs / Web / API / HTMLMediaElement"><code style="font-size: 14px;">HTMLMediaElement</code></a> para más detalles sobre las propiedades del elemento. Basta con establecer el valor en el tiempo, en segundos, con el que desea reproducir para continuar.</p> - -<p><span style="line-height: 1.5em;">Usted puede utilizar el elemento </span><code style="font-size: 14px;">seekable</code><span style="line-height: 1.5em;"> propiedad para determinar los rangos de los medios de comunicación que están disponibles para la búsqueda de la actualidad. Esto devuelve un objeto </span><a class="new" href="https://developer.mozilla.org/es/docs/Web/API/TimeRanges" style="line-height: 1.5em;" title="/ Es / docs / Web / API / TimeRanges"><code style="font-size: 14px;">TimeRanges</code></a><span style="line-height: 1.5em;"> que enumera los rangos de veces que se puede tratar de:</span></p> - -<pre class="brush: js">var mediaElement = document.getElementById('mediaElementID'); -mediaElement.seekable.start(); // Returns the starting time (in seconds) -mediaElement.seekable.end(); // Returns the ending time (in seconds) -mediaElement.currentTime = 122; // Seek to 122 seconds -mediaElement.played.end(); // Returns the number of seconds the browser has played -</pre> - -<h2 id="Especificación_del_rango_de_reproducción" style="margin: 0px 0px 0.8em; padding: 0px;"><font>Especificación del rango de reproducción</font></h2> - -<p style="margin: 0px 0px 1.286em; padding: 0px; line-height: 1.5em;">Al especificar el URI de los medios de comunicación para un elemento <a href="https://developer.mozilla.org/es/docs/HTML/Elemento/audio"><code style="font-size: 14px;"><audio></code></a> o <a href="https://developer.mozilla.org/es/docs/HTML/Elemento/video"><code style="font-size: 14px;"><video></code></a> , puede incluir opcionalmente información adicional para especificar la parte de los medios a reproducir. Para ello, añada una almohadilla ("#"), seguida de la descripción del fragmento de medios.</p> - -<p><span style="line-height: 1.5em;">Un intervalo de tiempo se especifica mediante la sintaxis:</span></p> - -<pre>#t=[starttime][,endtime]</pre> - -<p style="margin: 0px 0px 1.286em; padding: 0px; line-height: 1.5em;"><font>El tiempo se puede especificar como un número de segundos (como un valor de punto flotante) o como una hora / minuto / segundo tiempo separado con dos puntos (por ejemplo, 2:05:01 durante 2 horas, 5 minutos y 1 segundo).</font></p> - -<p style="margin: 0px 0px 1.286em; padding: 0px; line-height: 1.5em;">Algunos ejemplos:</p> - -<dl> -</dl> - -<dl> - <dt style="margin: 0px; padding: 0px; line-height: 22px;"><span class="nowiki">http://foo.com/video.ogg # t = 10,20</span></dt> - <dd style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; line-height: 22px;">Especifica que el vídeo debe desempeñar el rango de 10 segundos a través de 20 segundos.</dd> - <dt style="margin: 0px; padding: 0px; line-height: 22px;"><span class="nowiki">http://foo.com/video.ogg # t =, 10.5</span></dt> - <dd style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; line-height: 22px;">Especifica que el vídeo se reproducirá desde el principio a través de 10,5 segundos.</dd> - <dt style="margin: 0px; padding: 0px; line-height: 22px;"><span class="nowiki">http://foo.com/video.ogg # t =, 02:00:00</span></dt> - <dd style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; line-height: 22px;">Especifica que el vídeo se reproducirá desde el principio a través de dos horas.</dd> - <dt style="margin: 0px; padding: 0px; line-height: 22px;"><span class="nowiki">http://foo.com/video.ogg # t = 60</span></dt> - <dd style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; line-height: 22px;">Especifica que el vídeo se debe reproducir desde los 60 segundos hasta el final.</dd> -</dl> - -<div class="geckoVersionNote" style=""> -<p>{{ gecko_callout_heading("9.0") }}</p> -<font><font>La porción rango de reproducción del elemento de la especificación URI media esta en Gecko 9.0 (Firefox 9.0 / Thunderbird 9.0 / SeaMonkey 2.6). </font><font>En este momento, esta es la única parte de la </font></font><a class="external" href="http://www.w3.org/TR/media-frags/" style="padding-right: 16px; line-height: 21px;" title="http://www.w3.org/TR/media-frags/"><font>especificación de los medios de comunicación Fragmentos URI</font></a><font><font>implementado por el Gecko, y sólo se puede utilizar cuando se especifica la fuente para los elementos de los medios de comunicación, y no en la barra de direcciones.</font></font> - -<p> </p> -</div> - -<h2 id="Opciones_de_reserva" style="margin: 0px 0px 0.8em; padding: 0px;">Opciones de reserva</h2> - -<p style="margin: 0px 0px 1.286em; padding: 0px; line-height: 1.5em;">HTML incluido entre, por ejemplo, las etiquetas de apertura y cierre de los elementos de los medios de comunicación son procesados por los navegadores que no admitan medios de HTML5. Usted puede tomar ventaja de este hecho para proporcionar medios alternativos de reserva para esos navegadores.</p> - -<p><span style="line-height: 1.5em;">Esta sección proporciona dos opciones de reserva para video. </span><font>En cada caso, si el navegador soporta vídeo HTML5, que se utiliza, de lo contrario, se utiliza la opción de reserva.</font></p> - -<h3 id="Utilización_de_Flash" style="margin: 0px 0px 0.8em; padding: 0px;">Utilización de Flash</h3> - -<p><span style="line-height: 1.5em;">Puede usar Flash para reproducir una película formato Flash si el </span><a href="https://developer.mozilla.org/es/docs/HTML/Elemento/video" style="line-height: 1.5em;"><code style="font-size: 14px;"><video></code></a><span style="line-height: 1.5em;"> no se admite elemento</span><span style="line-height: inherit;">:</span></p> - -<pre class="brush: html"><video src="video.ogv" controls> - <object data="flvplayer.swf" type="application/x-shockwave-flash"> - <param value="flvplayer.swf" name="movie"/> - </object> -</video></pre> - -<p><font>Tenga en cuenta que no se debe incluir </font><code style="font-size: 14px;">classid</code><font> en el </font><code style="font-size: 14px;">objeto</code><font> tag con el fin de ser compatible con los navegadores que no sean Internet Explorer.</font></p> - -<p> </p> - -<p> </p> - -<p> </p> - -<h3 id="Reproducción_de_vídeos_Ogg_utilizando_un_applet_de_Java" style="margin: 0px 0px 0.8em; padding: 0px;"><font>Reproducción de vídeos Ogg utilizando un applet de Java</font></h3> - -<p><span style="line-height: 1.5em;">Hay un applet de Java llamada </span><a class="external" href="http://maikmerten.livejournal.com/2256.html" style="line-height: 1.5em; padding-right: 16px; background-color: transparent;" title="http://maikmerten.livejournal.com/2256.html">Cortado</a><span style="line-height: 1.5em;"> que se puede utilizar como reserva para reproducir vídeos Ogg en los navegadores que no tienen soporte para Java, pero no es compatible con vídeo HTML5</span><span style="line-height: inherit;">:</span></p> - -<pre class="brush: html"><video src="my_ogg_video.ogg" controls width="320" height="240"> - <object type="application/x-java-applet" width="320" height="240"> - <param name="archive" value="cortado.jar"> - <param name="code" value="com.fluendo.player.Cortado.class"> - <param name="url" value="my_ogg_video.ogg"> - <p>You need to install Java to play this file.</p> - </object> -</video></pre> - -<p style="margin: 0px 0px 1.286em; padding: 0px; line-height: 1.5em;"><font>Si no se crea un elemento secundario alternativa del elemento de objeto cortado, como el </font><a href="https://developer.mozilla.org/es/docs/HTML/Elemento/p"><code style="font-size: 14px;"><font><p></font></code></a><font> elemento superior, Firefox 3.5 instalaciones que manejan el video de forma nativa, pero no tienen Java instalado incorrectamente informarán al usuario de que es necesario instalar un plugin para ver el contenido en la página.</font></p> - -<p style="margin: 0px 0px 1.286em; padding: 0px; line-height: 1.5em;"> </p> - -<div style="line-height: 22px;"><span class="geckoMinVerMethod indicatorInHeadline minVer">(Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)</span> - -<h1 id="Gestión_de_errores" style="margin: 0px 0px 0.8em; padding: 0px; font-size: 1.857em;">Gestión de errores</h1> -</div> - -<p style="margin: 0px 0px 1.286em; padding: 0px; line-height: 1.5em;"> </p> - -<p style="margin: 0px 0px 1.286em; padding: 0px; line-height: 1.5em;">A partir de Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1), el tratamiento de errores se ha revisado para que coincida con la última versión de la especificación HTML5. En lugar de que el <code style="font-size: 14px;">error sea</code> enviado al elemento en sí, ahora se entrega a los elementos "hijos" <a href="https://developer.mozilla.org/es/docs/HTML/Elemento/source"><code style="font-size: 14px;"><source></code></a> correspondientes a las fuentes que resultan en el error.</p> - -<p><span style="line-height: 1.5em;">Esto permite detectar las fuentes no pudieron cargar, que puede ser útil. Considere este HTML</span><span style="line-height: inherit;">:</span></p> - -<pre class="brush: html"><video> -<source id="mp4_src" - src="video.mp4" - type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> -</source> -<source id="3gp_src" - src="video.3gp" - type='video/3gpp; codecs="mp4v.20.8, samr"'> -</source> -<source id="ogg_src" - src="video.ogv" - type='video/ogg; codecs="theora, vorbis"'> -</source> -</video></pre> - -<p style="margin: 0px 0px 1.286em; padding: 0px; line-height: 1.5em;">Dado que Firefox no es compatible con MP4 y 3GP, debido a su naturaleza de patente gravado, los <a href="https://developer.mozilla.org/es/docs/HTML/Elemento/source"><code style="font-size: 14px;"><source></code></a> elementos con el ID "mp4_src" y "3gp_src" recibirán <code style="font-size: 14px;">error</code> eventos antes de cargar el recurso Ogg. Las fuentes son juzgados en el orden en el que aparecen, y una vez que uno carga con éxito, las fuentes restantes no se trataron en absoluto.</p> - -<h3 id="Detectar_si_las_fuentes_no_han_cargado" style="margin: 0px 0px 0.8em; padding: 0px;">Detectar si las fuentes no han cargado</h3> - -<p style="margin: 0px 0px 1.286em; padding: 0px; line-height: 1.5em;"><code>Para detectar qué todos los elementos </code><a href="https://developer.mozilla.org/es/docs/HTML/Elemento/source"><code style="font-size: 14px;"><source></code></a> no han podido cargarse, se debe comprobar el valor de la propiedad <code style="font-size: 14px;">NetworkState</code> qué poseen todos los elementos de tipo multimedia. Si el valor es <code style="font-size: 14px;">HTMLMediaElement.NETWORK_NO_SOURCE</code>, se sabrá que las fuentes no se cargaron correctamente.</p> - -<p style="margin: 0px 0px 1.286em; padding: 0px; line-height: 1.5em;">Si en ese momento se agrega otra fuente mediante la inserción de un nuevo elemento <a href="https://developer.mozilla.org/es/docs/HTML/Elemento/source"><code style="font-size: 14px;"><source></code></a> como hijo del elemento multimedia, Gecko intenta cargar el recurso especificado.</p> - -<h3 id="Mostrando_contenido_fallback_cuando_la_fuente_no_puede_ser_cargada">Mostrando contenido <em>fallback</em> cuando la fuente no puede ser cargada</h3> - -<p>Otra forma de mostrar el contenido <em>fallback</em> de un vídeo cuando ninguna de sus fuentes pudieron ser cargadas, es añadir un manejador de excepciones o errores en el último elemento {{ HTMLElement("source") }}. Así usted podrá reemplazar el vídeo con el contenido <em>fallback</em>:</p> - -<pre class="brush: html language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>video</span> <span class="attr-name token">controls</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>source</span> <span class="attr-name token">src</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>dynamicsearch.mp4<span class="punctuation token">"</span></span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>video/mp4<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>source</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>a</span> <span class="attr-name token">href</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>dynamicsearch.mp4<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>img</span> <span class="attr-name token">src</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>dynamicsearch.jpg<span class="punctuation token">"</span></span> <span class="attr-name token">alt</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>App de b&uaacute;squeda din&aacute;mica en Firefox OS<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>a</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span>Clic en la im&aacute;gen para reproducir un v&iacute;deo demo de la app de b&uaacute;squeda din&aacute;mica<<span class="tag token"><span class="tag token"><span class="punctuation token">/</span>p</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>video</span><span class="punctuation token">></span></span></code></pre> - -<pre class="brush: js language-js"><code class="language-js"><span class="keyword token">var</span> v <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector<span class="punctuation token">(</span></span><span class="string token">'video'</span><span class="punctuation token">)</span><span class="punctuation token">,</span> - sources <span class="operator token">=</span> v<span class="punctuation token">.</span><span class="function token">querySelectorAll<span class="punctuation token">(</span></span><span class="string token">'source'</span><span class="punctuation token">)</span><span class="punctuation token">,</span> - lastsource <span class="operator token">=</span> sources<span class="punctuation token">[</span>sources<span class="punctuation token">.</span>length<span class="number token">-1</span><span class="punctuation token">]</span><span class="punctuation token">;</span> -lastsource<span class="punctuation token">.</span><span class="function token">addEventListener<span class="punctuation token">(</span></span><span class="string token">'error'</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span>ev<span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">var</span> d <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement<span class="punctuation token">(</span></span><span class="string token">'div'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - d<span class="punctuation token">.</span>innerHTML <span class="operator token">=</span> v<span class="punctuation token">.</span>innerHTML<span class="punctuation token">;</span> - v<span class="punctuation token">.</span>parentNode<span class="punctuation token">.</span><span class="function token">replaceChild<span class="punctuation token">(</span></span>d<span class="punctuation token">,</span> v<span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span><span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> - -<h2 id="sect1" style="margin: 0px 0px 0.8em; padding: 0px;"> </h2> - -<h2 id="Véase_también" style="margin: 0px 0px 0.8em; padding: 0px;">Véase también</h2> - -<ul style="margin: 0px 0px 1.286em; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; line-height: 22px;"> - <li>Los elementos relacionados con los medios HTML: <a href="https://developer.mozilla.org/es/docs/HTML/Elemento/audio"><code style="font-size: 14px;"><audio></code></a> , <a href="https://developer.mozilla.org/es/docs/HTML/Elemento/video"><code style="font-size: 14px;"><video></code></a> , <a href="https://developer.mozilla.org/es/docs/HTML/Elemento/source"><code style="font-size: 14px;"><source></code></a> ;</li> - <li><a href="https://developer.mozilla.org/en-US/docs/Manipulating_video_using_canvas" title="Vídeo Manipular con tela">Vídeo Manipular con canvas</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Introducing_the_Audio_API_Extension" title="Presentación de la extensión de API Audio">Presentación de la extensión de API Audio</a></li> - <li><code style="font-size: 14px;"><a class="external" href="http://developer.mozilla.org/es/docs/XPCOM_Interface_Reference/nsIDOMHTMLMediaElement" style="padding-right: 16px; background-color: transparent;">nsIDOMHTMLMediaElement</a></code></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Media_formats_supported_by_the_audio_and_video_elements" title="Formatos de los medios admitidos por los elementos de audio y vídeo">Formatos de los medios admitidos por los elementos de audio y vídeo</a></li> - <li><a class="external" href="http://en.flossmanuals.net/ogg-theora/" style="padding-right: 16px; background-color: transparent;" title="http://en.flossmanuals.net/ogg-theora/">Theora Cookbook</a></li> - <li><a class="external" href="http://popcornjs.org/" style="padding-right: 16px; background-color: transparent;" title="http://popcornjs.org/">Popcorn.js - Media Framework HTML5</a></li> - <li><a class="external" href="http://www.html5video.org/kaltura-html5/" style="padding-right: 16px; background-color: transparent;" title="http://www.html5video.org/kaltura-html5/">Kaltura Solución videoteca</a> , una biblioteca de JavaScript (mwEmbed) que soporta un retorno sin problemas con HTML5, VLC Player, Java Cortado y OMTK Vorbis reproductor de Flash. (Es utilizado por Wikimedia)</li> - <li><a class="external" href="http://omtk.org/flash/index.html" style="padding-right: 16px; background-color: transparent;" title="http://omtk.org/flash/index.html">OMTK - flash</a> , una biblioteca de Flash que implementa un decodificador Vorbis</li> - <li><a class="external" href="http://www.projekktor.com/" style="padding-right: 16px; background-color: transparent;" title="http://www.projekktor.com">Projekktor jugador</a> , un contenedor de JavaScript para audio vídeo-tags con fallback flash, de código abierto, GPL</li> - <li><a class="external" href="http://www.theora.org/cortado/" style="padding-right: 16px; background-color: transparent;" title="http://www.theora.org/cortado/">Applet Cortado</a> , una solución de reproducción de audio / vídeo en Java que mantiene Xiph.org</li> - <li><a class="external" href="http://videojs.com/" style="padding-right: 16px; background-color: transparent;" title="Video.js HTML5 Video Player">Video.JS</a> , un reproductor de vídeo HTML5 de código abierto y un marco.</li> - <li><a class="external" href="http://mediaelementjs.com/" style="padding-right: 16px; background-color: transparent;" title="http://mediaelementjs.com/">MediaElement.js</a> - marco audio / video HTML5 de código abierto con una cuña de Flash personalizada que imitan API multimedia HTML5 para exploradores más antiguos.</li> - <li><a class="external" href="http://www.hdwebplayer.com/" style="padding-right: 16px; background-color: transparent;" title="http://www.hdwebplayer.com">FLV Player</a> - HTML5 reserva soporte del reproductor de vídeo</li> -</ul> - -<p><span style="line-height: inherit;">{{ HTML5ArticleTOC() }}</span></p> |