{"id":12316,"date":"2014-05-12T00:23:09","date_gmt":"2014-05-12T00:23:09","guid":{"rendered":"http:\/\/ctrl-x.com.mx\/ctrlx\/?p=38"},"modified":"2014-05-12T00:23:09","modified_gmt":"2014-05-12T00:23:09","slug":"audio-y-video-con-html5","status":"publish","type":"post","link":"https:\/\/ctrl-x.com.mx\/ctrlx\/audio-y-video-con-html5\/","title":{"rendered":"Audio y video con HTML5"},"content":{"rendered":"<p style=\"margin: 0px 0px 24px; padding: 0px; border: 0px; color: #4d4e53; font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: #ffffff;\">HTML5 introduce soporte integrado para el contenido multimedia gracias a los elementos<span class=\"Apple-converted-space\">\u00a0<\/span><a style=\"margin: 0px; padding: 0px; border: 0px; text-decoration: none; color: #0095dd;\" title=\"This article hasn't been written yet. Please consider contributing!\" href=\"https:\/\/developer.mozilla.org\/es\/docs\/HTML\/Elemento\/audio\"><code style=\"margin: 0px; padding: 0px; border: 0px; font-style: normal; font-weight: inherit; font-variant: normal; font-size: 14px; line-height: normal; font-family: 'Courier New', 'Andale Mono', monospace;\">&lt;audio&gt;<\/code><\/a><span class=\"Apple-converted-space\">\u00a0<\/span>y<span class=\"Apple-converted-space\">\u00a0<\/span><a style=\"margin: 0px; padding: 0px; border: 0px; text-decoration: none; color: #0095dd;\" title=\"This article hasn't been written yet. Please consider contributing!\" href=\"https:\/\/developer.mozilla.org\/es\/docs\/HTML\/Elemento\/video\"><code style=\"margin: 0px; padding: 0px; border: 0px; font-style: normal; font-weight: inherit; font-variant: normal; font-size: 14px; line-height: normal; font-family: 'Courier New', 'Andale Mono', monospace;\">&lt;video&gt;<\/code><\/a>, ofreciendo la posibilidad de insertar contenido multimedia en documentos HTML.<\/p>\n<h2 id=\"Insertando_contenido_multimedia\" style=\"margin: 0px 0px 12px; padding: 0px; border: 0px; font-weight: bold; font-family: 'Open Sans', sans-serif; line-height: 30px; font-size: 2.142857142857143rem; letter-spacing: -1px; color: #4d4e53; font-style: normal; font-variant: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: #ffffff;\">Insertando contenido multimedia<\/h2>\n<p><!--more--><\/p>\n<p style=\"margin: 0px 0px 24px; padding: 0px; border: 0px; color: #4d4e53; font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: #ffffff;\">Insertar contenido multimedia en\u00a0 tus documentos HTML es trivial:<\/p>\n<div style=\"margin: 0px; padding: 0px; border: 0px; color: #4d4e53; font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: #ffffff; overflow: hidden;\">\n<pre class=\"brush: html  language-html\" style=\"margin: 0.5em 0px; padding: 1em 0px 1em 30px; border-width: 0px 0px 0px 6px; border-left-style: solid; border-left-color: rgba(0, 83, 159, 0.65098); background-image: url('https:\/\/developer.cdn.mozilla.net\/media\/redesign\/img\/blueprint-dark.png'); background-color: rgba(234, 239, 242, 0.247059); overflow: auto; line-height: 1.5em; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; font-family: Consolas, Monaco, 'Andale Mono', monospace; color: inherit; text-shadow: none; direction: ltr; text-align: left; white-space: pre; word-spacing: normal; tab-size: 4; position: relative; background-position: 50% 0%; background-repeat: repeat repeat;\" data-number=\"\"><code class=\" language-html\" style=\"margin: 0px; padding: 0px; border: 0px; font-style: normal; font-weight: inherit; font-variant: normal; font-size: 14px; line-height: normal; font-family: Consolas, Monaco, 'Andale Mono', monospace; color: inherit; text-shadow: none; direction: ltr; text-align: left; white-space: pre; word-spacing: normal; tab-size: 4;\"><span class=\"token tag\" style=\"margin: 0px; padding: 0px; border: 0px; color: #990055;\"><span class=\"token tag\" style=\"margin: 0px; padding: 0px; border: 0px; color: #990055;\"><span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">&lt;<\/span>video<\/span> <span class=\"token attr-name\" style=\"margin: 0px; padding: 0px; border: 0px; color: #669900;\">src<\/span><span class=\"token attr-value\" style=\"margin: 0px; padding: 0px; border: 0px; color: #0077aa;\"><span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">=<\/span><span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">\"<\/span>http:\/\/v2v.cc\/~j\/theora_testsuite\/320x240.ogg<span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">\"<\/span><\/span> <span class=\"token attr-name\" style=\"margin: 0px; padding: 0px; border: 0px; color: #669900;\">controls<\/span><span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">&gt;<\/span><\/span>\n  Tu navegador no implementa el elemento <span class=\"token tag\" style=\"margin: 0px; padding: 0px; border: 0px; color: #990055;\"><span class=\"token tag\" style=\"margin: 0px; padding: 0px; border: 0px; color: #990055;\"><span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">&lt;<\/span>code<\/span><span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">&gt;<\/span><\/span>video<span class=\"token tag\" style=\"margin: 0px; padding: 0px; border: 0px; color: #990055;\"><span class=\"token tag\" style=\"margin: 0px; padding: 0px; border: 0px; color: #990055;\"><span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">&lt;\/<\/span>code<\/span><span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">&gt;<\/span><\/span>.\n<span class=\"token tag\" style=\"margin: 0px; padding: 0px; border: 0px; color: #990055;\"><span class=\"token tag\" style=\"margin: 0px; padding: 0px; border: 0px; color: #990055;\"><span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">&lt;\/<\/span>video<\/span><span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">&gt;<\/span><\/span><\/code><\/pre>\n<p style=\"margin: 0px 0px 24px; padding: 0px; border: 0px;\">Este ejemplo reproduce un v\u00eddeo de ejemplo, con los controles de reproducci\u00f3n, desde el sitio Web de Theora.<\/p>\n<p style=\"margin: 0px 0px 24px; padding: 0px; border: 0px;\">Este es un ejemplo para insertar\u00a0<em style=\"margin: 0px; padding: 0px; border: 0px;\">audio<\/em><span class=\"Apple-converted-space\">\u00a0<\/span>en tu documento HTML<\/p>\n<pre class=\"brush: html  language-html\" style=\"margin: 0.5em 0px; padding: 1em 0px 1em 30px; border-width: 0px 0px 0px 6px; border-left-style: solid; border-left-color: rgba(0, 83, 159, 0.65098); background-image: url('https:\/\/developer.cdn.mozilla.net\/media\/redesign\/img\/blueprint-dark.png'); background-color: rgba(234, 239, 242, 0.247059); overflow: auto; line-height: 1.5em; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; font-family: Consolas, Monaco, 'Andale Mono', monospace; color: inherit; text-shadow: none; direction: ltr; text-align: left; white-space: pre; word-spacing: normal; tab-size: 4; position: relative; background-position: 50% 0%; background-repeat: repeat repeat;\" data-number=\"\"><code class=\" language-html\" style=\"margin: 0px; padding: 0px; border: 0px; font-style: normal; font-weight: inherit; font-variant: normal; font-size: 14px; line-height: normal; font-family: Consolas, Monaco, 'Andale Mono', monospace; color: inherit; text-shadow: none; direction: ltr; text-align: left; white-space: pre; word-spacing: normal; tab-size: 4;\"><span class=\"token tag\" style=\"margin: 0px; padding: 0px; border: 0px; color: #990055;\"><span class=\"token tag\" style=\"margin: 0px; padding: 0px; border: 0px; color: #990055;\"><span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">&lt;<\/span>audio<\/span> <span class=\"token attr-name\" style=\"margin: 0px; padding: 0px; border: 0px; color: #669900;\">src<\/span><span class=\"token attr-value\" style=\"margin: 0px; padding: 0px; border: 0px; color: #0077aa;\"><span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">=<\/span><span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">\"<\/span>\/test\/audio.ogg<span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">\"<\/span><\/span><span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">&gt;<\/span><\/span>\n<span class=\"token tag\" style=\"margin: 0px; padding: 0px; border: 0px; color: #990055;\"><span class=\"token tag\" style=\"margin: 0px; padding: 0px; border: 0px; color: #990055;\"><span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">&lt;<\/span>p<\/span><span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">&gt;<\/span><\/span>Tu navegador no implementa el elemento audio.<span class=\"token tag\" style=\"margin: 0px; padding: 0px; border: 0px; color: #990055;\"><span class=\"token tag\" style=\"margin: 0px; padding: 0px; border: 0px; color: #990055;\"><span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">&lt;\/<\/span>p<\/span><span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">&gt;<\/span><\/span>\n<span class=\"token tag\" style=\"margin: 0px; padding: 0px; border: 0px; color: #990055;\"><span class=\"token tag\" style=\"margin: 0px; padding: 0px; border: 0px; color: #990055;\"><span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">&lt;\/<\/span>audio<\/span><span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">&gt;<\/span><\/span><\/code><\/pre>\n<\/div>\n<p style=\"margin: 0px 0px 24px; padding: 0px; border: 0px; color: #4d4e53; font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: #ffffff;\">El atributo<span class=\"Apple-converted-space\">\u00a0<\/span><code style=\"margin: 0px; padding: 0px; border: 0px; font-style: normal; font-weight: inherit; font-variant: normal; font-size: 14px; line-height: normal; font-family: 'Courier New', 'Andale Mono', monospace;\">src<\/code><span class=\"Apple-converted-space\">\u00a0<\/span>puede ser una URL del archivo de audio o la ruta al archivo en el sistema local.<\/p>\n<div style=\"margin: 0px; padding: 0px; border: 0px; color: #4d4e53; font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: #ffffff; overflow: hidden;\">\n<pre class=\"brush: html  language-html\" style=\"margin: 0.5em 0px; padding: 1em 0px 1em 30px; border-width: 0px 0px 0px 6px; border-left-style: solid; border-left-color: rgba(0, 83, 159, 0.65098); background-image: url('https:\/\/developer.cdn.mozilla.net\/media\/redesign\/img\/blueprint-dark.png'); background-color: rgba(234, 239, 242, 0.247059); overflow: auto; line-height: 1.5em; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; font-family: Consolas, Monaco, 'Andale Mono', monospace; color: inherit; text-shadow: none; direction: ltr; text-align: left; white-space: pre; word-spacing: normal; tab-size: 4; position: relative; background-position: 50% 0%; background-repeat: repeat repeat;\" data-number=\"\"><code class=\" language-html\" style=\"margin: 0px; padding: 0px; border: 0px; font-style: normal; font-weight: inherit; font-variant: normal; font-size: 14px; line-height: normal; font-family: Consolas, Monaco, 'Andale Mono', monospace; color: inherit; text-shadow: none; direction: ltr; text-align: left; white-space: pre; word-spacing: normal; tab-size: 4;\"><span class=\"token tag\" style=\"margin: 0px; padding: 0px; border: 0px; color: #990055;\"><span class=\"token tag\" style=\"margin: 0px; padding: 0px; border: 0px; color: #990055;\"><span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">&lt;<\/span>audio<\/span> <span class=\"token attr-name\" style=\"margin: 0px; padding: 0px; border: 0px; color: #669900;\">src<\/span><span class=\"token attr-value\" style=\"margin: 0px; padding: 0px; border: 0px; color: #0077aa;\"><span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">=<\/span><span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">\"<\/span>audio.ogg<span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">\"<\/span><\/span> <span class=\"token attr-name\" style=\"margin: 0px; padding: 0px; border: 0px; color: #669900;\">controls<\/span> <span class=\"token attr-name\" style=\"margin: 0px; padding: 0px; border: 0px; color: #669900;\">autoplay<\/span> <span class=\"token attr-name\" style=\"margin: 0px; padding: 0px; border: 0px; color: #669900;\">loop<\/span><span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">&gt;<\/span><\/span>\n<span class=\"token tag\" style=\"margin: 0px; padding: 0px; border: 0px; color: #990055;\"><span class=\"token tag\" style=\"margin: 0px; padding: 0px; border: 0px; color: #990055;\"><span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">&lt;<\/span>p<\/span><span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">&gt;<\/span><\/span>Tu navegador no implementa el elemento audio<span class=\"token tag\" style=\"margin: 0px; padding: 0px; border: 0px; color: #990055;\"><span class=\"token tag\" style=\"margin: 0px; padding: 0px; border: 0px; color: #990055;\"><span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">&lt;\/<\/span>p<\/span><span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">&gt;<\/span><\/span>\n<span class=\"token tag\" style=\"margin: 0px; padding: 0px; border: 0px; color: #990055;\"><span class=\"token tag\" style=\"margin: 0px; padding: 0px; border: 0px; color: #990055;\"><span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">&lt;\/<\/span>audio<\/span><span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">&gt;<\/span><\/span><\/code><\/pre>\n<\/div>\n<p style=\"margin: 0px 0px 24px; padding: 0px; border: 0px; color: #4d4e53; font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: #ffffff;\">Este c\u00f3digo de ejemplo usa los atributos del elemento<span class=\"Apple-converted-space\">\u00a0<\/span><a style=\"margin: 0px; padding: 0px; border: 0px; text-decoration: none; color: #0095dd;\" title=\"This article hasn't been written yet. Please consider contributing!\" href=\"https:\/\/developer.mozilla.org\/es\/docs\/HTML\/Elemento\/audio\"><code style=\"margin: 0px; padding: 0px; border: 0px; font-style: normal; font-weight: inherit; font-variant: normal; font-size: 14px; line-height: normal; font-family: 'Courier New', 'Andale Mono', monospace;\">&lt;audio&gt;<\/code><\/a>:<\/p>\n<ul style=\"margin: 0px 0px 24px; padding: 0px 0px 0px 40px; border: 0px; list-style: disc; color: #4d4e53; font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: #ffffff;\">\n<li style=\"margin: 0px; padding: 0px 0px 6px; border: 0px;\"><code style=\"margin: 0px; padding: 0px; border: 0px; font-style: normal; font-weight: inherit; font-variant: normal; font-size: 14px; line-height: normal; font-family: 'Courier New', 'Andale Mono', monospace;\">controls<\/code><span class=\"Apple-converted-space\">\u00a0<\/span>: Muestra los controles est\u00e1ndar de HTML5 para audio en una p\u00e1gina Web.<\/li>\n<li style=\"margin: 0px; padding: 0px 0px 6px; border: 0px;\"><code style=\"margin: 0px; padding: 0px; border: 0px; font-style: normal; font-weight: inherit; font-variant: normal; font-size: 14px; line-height: normal; font-family: 'Courier New', 'Andale Mono', monospace;\">autoplay<\/code><span class=\"Apple-converted-space\">\u00a0<\/span>: Hace que el audio se reproduzca autom\u00e1ticamente.<\/li>\n<li style=\"margin: 0px; padding: 0px 0px 6px; border: 0px;\"><code style=\"margin: 0px; padding: 0px; border: 0px; font-style: normal; font-weight: inherit; font-variant: normal; font-size: 14px; line-height: normal; font-family: 'Courier New', 'Andale Mono', monospace;\">loop<\/code><span class=\"Apple-converted-space\">\u00a0<\/span>: Hace que el audio se repita autom\u00e1ticamente.<\/li>\n<\/ul>\n<div style=\"margin: 0px; padding: 0px; border: 0px; color: #4d4e53; font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: #ffffff; overflow: hidden;\">\n<pre class=\"brush: html  language-html\" style=\"margin: 0.5em 0px; padding: 1em 0px 1em 30px; border-width: 0px 0px 0px 6px; border-left-style: solid; border-left-color: rgba(0, 83, 159, 0.65098); background-image: url('https:\/\/developer.cdn.mozilla.net\/media\/redesign\/img\/blueprint-dark.png'); background-color: rgba(234, 239, 242, 0.247059); overflow: auto; line-height: 1.5em; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; font-family: Consolas, Monaco, 'Andale Mono', monospace; color: inherit; text-shadow: none; direction: ltr; text-align: left; white-space: pre; word-spacing: normal; tab-size: 4; position: relative; background-position: 50% 0%; background-repeat: repeat repeat;\" data-number=\"\"><code class=\" language-html\" style=\"margin: 0px; padding: 0px; border: 0px; font-style: normal; font-weight: inherit; font-variant: normal; font-size: 14px; line-height: normal; font-family: Consolas, Monaco, 'Andale Mono', monospace; color: inherit; text-shadow: none; direction: ltr; text-align: left; white-space: pre; word-spacing: normal; tab-size: 4;\"><span class=\"token tag\" style=\"margin: 0px; padding: 0px; border: 0px; color: #990055;\"><span class=\"token tag\" style=\"margin: 0px; padding: 0px; border: 0px; color: #990055;\"><span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">&lt;<\/span>audio<\/span> <span class=\"token attr-name\" style=\"margin: 0px; padding: 0px; border: 0px; color: #669900;\">src<\/span><span class=\"token attr-value\" style=\"margin: 0px; padding: 0px; border: 0px; color: #0077aa;\"><span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">=<\/span><span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">\"<\/span>audio.mp3<span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">\"<\/span><\/span> <span class=\"token attr-name\" style=\"margin: 0px; padding: 0px; border: 0px; color: #669900;\">preload<\/span><span class=\"token attr-value\" style=\"margin: 0px; padding: 0px; border: 0px; color: #0077aa;\"><span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">=<\/span><span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">\"<\/span>auto<span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">\"<\/span><\/span> <span class=\"token attr-name\" style=\"margin: 0px; padding: 0px; border: 0px; color: #669900;\">controls<\/span><span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">&gt;<\/span><\/span><span class=\"token tag\" style=\"margin: 0px; padding: 0px; border: 0px; color: #990055;\"><span class=\"token tag\" style=\"margin: 0px; padding: 0px; border: 0px; color: #990055;\"><span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">&lt;\/<\/span>audio<\/span><span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">&gt;<\/span><\/span><\/code><\/pre>\n<\/div>\n<p style=\"margin: 0px 0px 24px; padding: 0px; border: 0px; color: #4d4e53; font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: #ffffff;\">El atributo<span class=\"Apple-converted-space\">\u00a0<\/span><code style=\"margin: 0px; padding: 0px; border: 0px; font-style: normal; font-weight: inherit; font-variant: normal; font-size: 14px; line-height: normal; font-family: 'Courier New', 'Andale Mono', monospace;\">preload<\/code><span class=\"Apple-converted-space\">\u00a0<\/span>es usado en el elemento audio para almacenar temporalmente (buffering) archivos de gran tama\u00f1o. Este puede tomar uno de 3 valores:<\/p>\n<ul style=\"margin: 0px 0px 24px; padding: 0px 0px 0px 40px; border: 0px; list-style: disc; color: #4d4e53; font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: #ffffff;\">\n<li style=\"margin: 0px; padding: 0px 0px 6px; border: 0px;\"><code style=\"margin: 0px; padding: 0px; border: 0px; font-style: normal; font-weight: inherit; font-variant: normal; font-size: 14px; line-height: normal; font-family: 'Courier New', 'Andale Mono', monospace;\">\"none\"<\/code><span class=\"Apple-converted-space\">\u00a0<\/span>no almacena temporalmente el archivo<\/li>\n<li style=\"margin: 0px; padding: 0px 0px 6px; border: 0px;\"><code style=\"margin: 0px; padding: 0px; border: 0px; font-style: normal; font-weight: inherit; font-variant: normal; font-size: 14px; line-height: normal; font-family: 'Courier New', 'Andale Mono', monospace;\">\"auto\"<\/code><span class=\"Apple-converted-space\">\u00a0<\/span>almacena temporalmente el archivo multimedia<\/li>\n<li style=\"margin: 0px; padding: 0px 0px 6px; border: 0px;\"><code style=\"margin: 0px; padding: 0px; border: 0px; font-style: normal; font-weight: inherit; font-variant: normal; font-size: 14px; line-height: normal; font-family: 'Courier New', 'Andale Mono', monospace;\">\"metadata\"<\/code><span class=\"Apple-converted-space\">\u00a0<\/span>almacena temporalmente s\u00f3lo los metadatos del archivo<\/li>\n<\/ul>\n<p style=\"margin: 0px 0px 24px; padding: 0px; border: 0px; color: #4d4e53; font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: #ffffff;\">Se pueden especificar m\u00faltiples fuentes de archivos usando el elemento<span class=\"Apple-converted-space\">\u00a0<\/span><a style=\"margin: 0px; padding: 0px; border: 0px; text-decoration: none; color: #0095dd;\" title=\"This article hasn't been written yet. Please consider contributing!\" href=\"https:\/\/developer.mozilla.org\/es\/docs\/HTML\/Elemento\/source\"><code style=\"margin: 0px; padding: 0px; border: 0px; font-style: normal; font-weight: inherit; font-variant: normal; font-size: 14px; line-height: normal; font-family: 'Courier New', 'Andale Mono', monospace;\">&lt;source&gt;<\/code><\/a><span class=\"Apple-converted-space\">\u00a0<\/span><span id=\"result_box\" lang=\"es\" style=\"margin: 0px; padding: 0px; border: 0px;\"><span class=\"hps\" style=\"margin: 0px; padding: 0px; border: 0px;\">con el fin de<\/span><span class=\"Apple-converted-space\">\u00a0<\/span><span class=\"hps\" style=\"margin: 0px; padding: 0px; border: 0px;\">proporcionar v\u00eddeo<\/span><span class=\"Apple-converted-space\">\u00a0<\/span><span class=\"hps\" style=\"margin: 0px; padding: 0px; border: 0px;\">o<\/span><span class=\"Apple-converted-space\">\u00a0<\/span><span class=\"hps\" style=\"margin: 0px; padding: 0px; border: 0px;\">audio<\/span><span class=\"Apple-converted-space\">\u00a0<\/span><span class=\"hps\" style=\"margin: 0px; padding: 0px; border: 0px;\">codificados en formatos<\/span><span class=\"hps\" style=\"margin: 0px; padding: 0px; border: 0px;\">diferentes<\/span><span class=\"Apple-converted-space\">\u00a0<\/span><span class=\"hps\" style=\"margin: 0px; padding: 0px; border: 0px;\">para<\/span><span class=\"Apple-converted-space\">\u00a0<\/span><span class=\"hps\" style=\"margin: 0px; padding: 0px; border: 0px;\">diferentes navegadores<\/span><\/span>. Por ejemplo:<\/p>\n<pre class=\"brush: html  language-html\" style=\"margin: 0.5em 0px; padding: 1em 0px 1em 30px; border-width: 0px 0px 0px 6px; border-left-style: solid; border-left-color: rgba(0, 83, 159, 0.65098); background-image: url('https:\/\/developer.cdn.mozilla.net\/media\/redesign\/img\/blueprint-dark.png'); background-color: rgba(234, 239, 242, 0.247059); overflow: auto; line-height: 1.5em; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; font-family: Consolas, Monaco, 'Andale Mono', monospace; color: #4d4e53; text-shadow: none; direction: ltr; text-align: left; white-space: pre; word-spacing: 0px; tab-size: 4; position: relative; letter-spacing: normal; orphans: auto; text-indent: 0px; text-transform: none; widows: auto; -webkit-text-stroke-width: 0px; background-position: 50% 0%; background-repeat: repeat repeat;\" data-number=\"\"><code class=\" language-html\" style=\"margin: 0px; padding: 0px; border: 0px; font-style: normal; font-weight: inherit; font-variant: normal; font-size: 14px; line-height: normal; font-family: Consolas, Monaco, 'Andale Mono', monospace; color: inherit; text-shadow: none; direction: ltr; text-align: left; white-space: pre; word-spacing: normal; tab-size: 4;\"><span class=\"token tag\" style=\"margin: 0px; padding: 0px; border: 0px; color: #990055;\"><span class=\"token tag\" style=\"margin: 0px; padding: 0px; border: 0px; color: #990055;\"><span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">&lt;<\/span>video<\/span> <span class=\"token attr-name\" style=\"margin: 0px; padding: 0px; border: 0px; color: #669900;\">controls<\/span><span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">&gt;<\/span><\/span>\n  <span class=\"token tag\" style=\"margin: 0px; padding: 0px; border: 0px; color: #990055;\"><span class=\"token tag\" style=\"margin: 0px; padding: 0px; border: 0px; color: #990055;\"><span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">&lt;<\/span>source<\/span> <span class=\"token attr-name\" style=\"margin: 0px; padding: 0px; border: 0px; color: #669900;\">src<\/span><span class=\"token attr-value\" style=\"margin: 0px; padding: 0px; border: 0px; color: #0077aa;\"><span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">=<\/span><span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">\"<\/span>foo.ogg<span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">\"<\/span><\/span> <span class=\"token attr-name\" style=\"margin: 0px; padding: 0px; border: 0px; color: #669900;\">type<\/span><span class=\"token attr-value\" style=\"margin: 0px; padding: 0px; border: 0px; color: #0077aa;\"><span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">=<\/span><span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">\"<\/span>video\/ogg<span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">\"<\/span><\/span><span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">&gt;<\/span><\/span>\n  <span class=\"token tag\" style=\"margin: 0px; padding: 0px; border: 0px; color: #990055;\"><span class=\"token tag\" style=\"margin: 0px; padding: 0px; border: 0px; color: #990055;\"><span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">&lt;<\/span>source<\/span> <span class=\"token attr-name\" style=\"margin: 0px; padding: 0px; border: 0px; color: #669900;\">src<\/span><span class=\"token attr-value\" style=\"margin: 0px; padding: 0px; border: 0px; color: #0077aa;\"><span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">=<\/span><span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">\"<\/span>foo.mp4<span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">\"<\/span><\/span> <span class=\"token attr-name\" style=\"margin: 0px; padding: 0px; border: 0px; color: #669900;\">type<\/span><span class=\"token attr-value\" style=\"margin: 0px; padding: 0px; border: 0px; color: #0077aa;\"><span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">=<\/span><span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">\"<\/span>video\/mp4<span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">\"<\/span><\/span><span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">&gt;<\/span><\/span>\n  Tu navegador no implementa el elemento <span class=\"token tag\" style=\"margin: 0px; padding: 0px; border: 0px; color: #990055;\"><span class=\"token tag\" style=\"margin: 0px; padding: 0px; border: 0px; color: #990055;\"><span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">&lt;<\/span>code<\/span><span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">&gt;<\/span><\/span>video<span class=\"token tag\" style=\"margin: 0px; padding: 0px; border: 0px; color: #990055;\"><span class=\"token tag\" style=\"margin: 0px; padding: 0px; border: 0px; color: #990055;\"><span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">&lt;\/<\/span>code<\/span><span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">&gt;<\/span><\/span>.\n<span class=\"token tag\" style=\"margin: 0px; padding: 0px; border: 0px; color: #990055;\"><span class=\"token tag\" style=\"margin: 0px; padding: 0px; border: 0px; color: #990055;\"><span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">&lt;\/<\/span>video<\/span><span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">&gt;<\/span><\/span><\/code><\/pre>\n<p style=\"margin: 0px 0px 24px; padding: 0px; border: 0px; color: #4d4e53; font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: #ffffff;\">Esto reproduce el archivo Ogg en navegadores que admiten el formato Ogg. Si el navegador no admite Ogg, el navegador usar\u00e1 el archivo MPEG-4. Mira tambi\u00e9n la lista de<span class=\"Apple-converted-space\">\u00a0<\/span><a style=\"margin: 0px; padding: 0px; border: 0px; text-decoration: none; color: #0095dd;\" title=\"Media formats supported by the audio and video elements\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Media_formats_supported_by_the_audio_and_video_elements\">los formatos multimedia admitidos por los elementos audio y video<\/a><span class=\"Apple-converted-space\">\u00a0<\/span>en los diferentes navegadores.<\/p>\n<p style=\"margin: 0px 0px 24px; padding: 0px; border: 0px; color: #4d4e53; font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: #ffffff;\">Tambi\u00e9n puedes especificar qu\u00e9 codecs requiere el archivo multimedia; de esta forma el navegador tomar\u00e1 decisiones m\u00e1s inteligentes:<\/p>\n<pre class=\"brush: html  language-html\" style=\"margin: 0.5em 0px; padding: 1em 0px 1em 30px; border-width: 0px 0px 0px 6px; border-left-style: solid; border-left-color: rgba(0, 83, 159, 0.65098); background-image: url('https:\/\/developer.cdn.mozilla.net\/media\/redesign\/img\/blueprint-dark.png'); background-color: rgba(234, 239, 242, 0.247059); overflow: auto; line-height: 1.5em; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; font-family: Consolas, Monaco, 'Andale Mono', monospace; color: #4d4e53; text-shadow: none; direction: ltr; text-align: left; white-space: pre; word-spacing: 0px; tab-size: 4; position: relative; letter-spacing: normal; orphans: auto; text-indent: 0px; text-transform: none; widows: auto; -webkit-text-stroke-width: 0px; background-position: 50% 0%; background-repeat: repeat repeat;\" data-number=\"\"><code class=\" language-html\" style=\"margin: 0px; padding: 0px; border: 0px; font-style: normal; font-weight: inherit; font-variant: normal; font-size: 14px; line-height: normal; font-family: Consolas, Monaco, 'Andale Mono', monospace; color: inherit; text-shadow: none; direction: ltr; text-align: left; white-space: pre; word-spacing: normal; tab-size: 4;\"><span class=\"token tag\" style=\"margin: 0px; padding: 0px; border: 0px; color: #990055;\"><span class=\"token tag\" style=\"margin: 0px; padding: 0px; border: 0px; color: #990055;\"><span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">&lt;<\/span>video<\/span> <span class=\"token attr-name\" style=\"margin: 0px; padding: 0px; border: 0px; color: #669900;\">controls<\/span><span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">&gt;<\/span><\/span>\n  <span class=\"token tag\" style=\"margin: 0px; padding: 0px; border: 0px; color: #990055;\"><span class=\"token tag\" style=\"margin: 0px; padding: 0px; border: 0px; color: #990055;\"><span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">&lt;<\/span>source<\/span> <span class=\"token attr-name\" style=\"margin: 0px; padding: 0px; border: 0px; color: #669900;\">src<\/span><span class=\"token attr-value\" style=\"margin: 0px; padding: 0px; border: 0px; color: #0077aa;\"><span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">=<\/span><span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">\"<\/span>foo.ogg<span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">\"<\/span><\/span> <span class=\"token attr-name\" style=\"margin: 0px; padding: 0px; border: 0px; color: #669900;\">type<\/span><span class=\"token attr-value\" style=\"margin: 0px; padding: 0px; border: 0px; color: #0077aa;\"><span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">=<\/span><span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">\"<\/span>video\/ogg; codecs<span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">=<\/span>dirac, speex<span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">\"<\/span><\/span><span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">&gt;<\/span><\/span>\n  Tu navegador no implementa el elemento <span class=\"token tag\" style=\"margin: 0px; padding: 0px; border: 0px; color: #990055;\"><span class=\"token tag\" style=\"margin: 0px; padding: 0px; border: 0px; color: #990055;\"><span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">&lt;<\/span>code<\/span><span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">&gt;<\/span><\/span>video<span class=\"token tag\" style=\"margin: 0px; padding: 0px; border: 0px; color: #990055;\"><span class=\"token tag\" style=\"margin: 0px; padding: 0px; border: 0px; color: #990055;\"><span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">&lt;\/<\/span>code<\/span><span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">&gt;<\/span><\/span>.\n<span class=\"token tag\" style=\"margin: 0px; padding: 0px; border: 0px; color: #990055;\"><span class=\"token tag\" style=\"margin: 0px; padding: 0px; border: 0px; color: #990055;\"><span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">&lt;\/<\/span>video<\/span><span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">&gt;<\/span><\/span><\/code><\/pre>\n<p style=\"margin: 0px 0px 24px; padding: 0px; border: 0px; color: #4d4e53; font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: #ffffff;\">Aqu\u00ed, especificamos que el v\u00eddeo usa los codecs Dirac y Speex. Si el navegador implementa Ogg, pero no los codecs especificados, el v\u00eddeo no ser\u00e1 cargado.<\/p>\n<p style=\"margin: 0px 0px 24px; padding: 0px; border: 0px; color: #4d4e53; font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: #ffffff;\">Si el atributo<span class=\"Apple-converted-space\">\u00a0<\/span><code style=\"margin: 0px; padding: 0px; border: 0px; font-style: normal; font-weight: inherit; font-variant: normal; font-size: 14px; line-height: normal; font-family: 'Courier New', 'Andale Mono', monospace;\">type<\/code><span class=\"Apple-converted-space\">\u00a0<\/span>no est\u00e1 especificado, el tipo de contenido multimedia se obtiene del servidor<span class=\"Apple-converted-space\">\u00a0<\/span><span id=\"result_box\" lang=\"es\" style=\"margin: 0px; padding: 0px; border: 0px;\"><span class=\"hps\" style=\"margin: 0px; padding: 0px; border: 0px;\">y<\/span><span class=\"Apple-converted-space\">\u00a0<\/span>se<span class=\"Apple-converted-space\">\u00a0<\/span><span class=\"hps\" style=\"margin: 0px; padding: 0px; border: 0px;\">comprueba para<\/span><span class=\"Apple-converted-space\">\u00a0<\/span><span class=\"hps\" style=\"margin: 0px; padding: 0px; border: 0px;\">ver<\/span><span class=\"Apple-converted-space\">\u00a0<\/span><span class=\"hps\" style=\"margin: 0px; padding: 0px; border: 0px;\">si el navegador<\/span><span class=\"Apple-converted-space\">\u00a0<\/span><span class=\"hps\" style=\"margin: 0px; padding: 0px; border: 0px;\">lo puede manejar<\/span><\/span>; si no puede ser mostrado, se comprueba el siguiente<span class=\"Apple-converted-space\">\u00a0<\/span><code style=\"margin: 0px; padding: 0px; border: 0px; font-style: normal; font-weight: inherit; font-variant: normal; font-size: 14px; line-height: normal; font-family: 'Courier New', 'Andale Mono', monospace;\">source<\/code><span class=\"Apple-converted-space\">\u00a0<\/span>, si ninguno de los elementos<span class=\"Apple-converted-space\">\u00a0<\/span><code style=\"margin: 0px; padding: 0px; border: 0px; font-style: normal; font-weight: inherit; font-variant: normal; font-size: 14px; line-height: normal; font-family: 'Courier New', 'Andale Mono', monospace;\">source<\/code><span class=\"Apple-converted-space\">\u00a0<\/span>especificados pueden ser usados, un evento de<span class=\"Apple-converted-space\">\u00a0<\/span><code style=\"margin: 0px; padding: 0px; border: 0px; font-style: normal; font-weight: inherit; font-variant: normal; font-size: 14px; line-height: normal; font-family: 'Courier New', 'Andale Mono', monospace;\">error<\/code><span class=\"Apple-converted-space\">\u00a0<\/span>es enviado al elemento<span class=\"Apple-converted-space\">\u00a0<\/span><code style=\"margin: 0px; padding: 0px; border: 0px; font-style: normal; font-weight: inherit; font-variant: normal; font-size: 14px; line-height: normal; font-family: 'Courier New', 'Andale Mono', monospace;\">video<\/code>. Si el atributo<span class=\"Apple-converted-space\">\u00a0<\/span><code style=\"margin: 0px; padding: 0px; border: 0px; font-style: normal; font-weight: inherit; font-variant: normal; font-size: 14px; line-height: normal; font-family: 'Courier New', 'Andale Mono', monospace;\">type<\/code><span class=\"Apple-converted-space\">\u00a0<\/span>est\u00e1 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<span class=\"Apple-converted-space\">\u00a0<\/span><code style=\"margin: 0px; padding: 0px; border: 0px; font-style: normal; font-weight: inherit; font-variant: normal; font-size: 14px; line-height: normal; font-family: 'Courier New', 'Andale Mono', monospace;\">source<\/code><span class=\"Apple-converted-space\">\u00a0<\/span>se comprueba una vez.<\/p>\n<p style=\"margin: 0px 0px 24px; padding: 0px; border: 0px; color: #4d4e53; font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: #ffffff;\">Mira<span class=\"Apple-converted-space\">\u00a0<\/span><a style=\"margin: 0px; padding: 0px; border: 0px; text-decoration: none; color: #0095dd;\" title=\"https:\/\/developer.mozilla.org\/en\/DOM\/Media_events\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/DOM\/Media_events\">los eventos del contenido multimedia<\/a><span class=\"Apple-converted-space\">\u00a0<\/span>para una lista completa de eventos asociados con la producci\u00f3n multimedia. Para detalles en los formatos multimedia soportados por los diferentes navegadores, mira<span class=\"Apple-converted-space\">\u00a0<\/span><a style=\"margin: 0px; padding: 0px; border: 0px; text-decoration: none; color: #0095dd;\" title=\"Media formats supported by the audio and video elements\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Media_formats_supported_by_the_audio_and_video_elements\">los formatos multimedia sportados por los elementos audio y video<\/a>.<\/p>\n<h2 id=\"Controlando_la_reproducci.C3.B3n_multimedia\" style=\"margin: 0px 0px 12px; padding: 0px; border: 0px; font-weight: bold; font-family: 'Open Sans', sans-serif; line-height: 30px; font-size: 2.142857142857143rem; letter-spacing: -1px; color: #4d4e53; font-style: normal; font-variant: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: #ffffff;\">Controlando la reproducci\u00f3n multimedia<\/h2>\n<p style=\"margin: 0px 0px 24px; padding: 0px; border: 0px; color: #4d4e53; font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: #ffffff;\">Una vez que has inscrustado el contenido multimedia en tu documento HTML usando los nuevos elementos, t\u00fa puedes controlarlos mediante la programaci\u00f3n en JavaScript. Por ejemplo, para iniciar (o reiniciar) la reproducci\u00f3n, puedes hacer esto:<\/p>\n<pre class=\"brush: js  language-js\" style=\"margin: 0.5em 0px; padding: 1em 0px 1em 30px; border-width: 0px 0px 0px 6px; border-left-style: solid; border-left-color: rgba(0, 83, 159, 0.65098); background-image: url('https:\/\/developer.cdn.mozilla.net\/media\/redesign\/img\/blueprint-dark.png'); background-color: rgba(234, 239, 242, 0.247059); overflow: auto; line-height: 1.5em; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; font-family: Consolas, Monaco, 'Andale Mono', monospace; color: #4d4e53; text-shadow: none; direction: ltr; text-align: left; white-space: pre; word-spacing: 0px; tab-size: 4; position: relative; letter-spacing: normal; orphans: auto; text-indent: 0px; text-transform: none; widows: auto; -webkit-text-stroke-width: 0px; background-position: 50% 0%; background-repeat: repeat repeat;\" data-number=\"\"><code class=\" language-js\" style=\"margin: 0px; padding: 0px; border: 0px; font-style: normal; font-weight: inherit; font-variant: normal; font-size: 14px; line-height: normal; font-family: Consolas, Monaco, 'Andale Mono', monospace; color: inherit; text-shadow: none; direction: ltr; text-align: left; white-space: pre; word-spacing: normal; tab-size: 4;\"><span class=\"token keyword\" style=\"margin: 0px; padding: 0px; border: 0px; color: #0077aa;\">var<\/span> v <span class=\"token operator\" style=\"margin: 0px; padding: 0px; border: 0px; color: #a67f59; background-color: rgba(255, 255, 255, 0.498039); background-position: initial initial; background-repeat: initial initial;\">=<\/span> document<span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">.<\/span><span class=\"token function\" style=\"margin: 0px; padding: 0px; border: 0px;\">getElementsByTagName<span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">(<\/span><\/span><span class=\"token string\" style=\"margin: 0px; padding: 0px; border: 0px; color: #669900;\">\"video\"<\/span><span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">)<\/span><span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">[<\/span><span class=\"token number\" style=\"margin: 0px; padding: 0px; border: 0px; color: #990055;\">0<\/span><span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">]<\/span><span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">;<\/span>\nv<span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">.<\/span><span class=\"token function\" style=\"margin: 0px; padding: 0px; border: 0px;\">play<span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">(<\/span><\/span><span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">)<\/span><span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">;<\/span><\/code><\/pre>\n<p style=\"margin: 0px 0px 24px; padding: 0px; border: 0px; color: #4d4e53; font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: #ffffff;\">La primera l\u00ednea obtiene el primer elemento video en el documento, y la segunda l\u00ednea llama al m\u00e9todo<span class=\"Apple-converted-space\">\u00a0<\/span><a style=\"margin: 0px; padding: 0px; border: 0px; text-decoration: none; color: #0095dd;\" title=\"nsIDOMHTMLMediaElement#play()\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/XPCOM_Interface_Reference\/NsIDOMHTMLMediaElement#play()\"><code style=\"margin: 0px; padding: 0px; border: 0px; font-style: normal; font-weight: inherit; font-variant: normal; font-size: 14px; line-height: normal; font-family: 'Courier New', 'Andale Mono', monospace;\">play()<\/code><\/a><span class=\"Apple-converted-space\">\u00a0<\/span>del elemento, como est\u00e1 definido en la interfaz<span class=\"Apple-converted-space\">\u00a0<\/span><code style=\"margin: 0px; padding: 0px; border: 0px; font-style: normal; font-weight: inherit; font-variant: normal; font-size: 14px; line-height: normal; font-family: 'Courier New', 'Andale Mono', monospace;\"><a class=\"new\" style=\"margin: 0px; padding: 0px; border: 0px; text-decoration: none; color: #990000;\" title=\"\" href=\"https:\/\/developer.mozilla.org\/es\/docs\/XPCOM_Interface_Reference\/nsIDOMHTMLMediaElement\">nsIDOMHTMLMediaElement<\/a><\/code><span class=\"Apple-converted-space\">\u00a0<\/span>que es usda para implementar los elementos multimedia.<\/p>\n<p style=\"margin: 0px 0px 24px; padding: 0px; border: 0px; color: #4d4e53; font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: #ffffff;\">Controlando un reproductor de audio en HTML5 para reproducir, pausar, aumentar y disminuir el volumen usando algo de Javascript es demasiado sencillo.<\/p>\n<pre class=\"brush: html  language-html\" style=\"margin: 0.5em 0px; padding: 1em 0px 1em 30px; border-width: 0px 0px 0px 6px; border-left-style: solid; border-left-color: rgba(0, 83, 159, 0.65098); background-image: url('https:\/\/developer.cdn.mozilla.net\/media\/redesign\/img\/blueprint-dark.png'); background-color: rgba(234, 239, 242, 0.247059); overflow: auto; line-height: 1.5em; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; font-family: Consolas, Monaco, 'Andale Mono', monospace; color: #4d4e53; text-shadow: none; direction: ltr; text-align: left; white-space: pre; word-spacing: 0px; tab-size: 4; position: relative; letter-spacing: normal; orphans: auto; text-indent: 0px; text-transform: none; widows: auto; -webkit-text-stroke-width: 0px; background-position: 50% 0%; background-repeat: repeat repeat;\" data-number=\"\"><code class=\" language-html\" style=\"margin: 0px; padding: 0px; border: 0px; font-style: normal; font-weight: inherit; font-variant: normal; font-size: 14px; line-height: normal; font-family: Consolas, Monaco, 'Andale Mono', monospace; color: inherit; text-shadow: none; direction: ltr; text-align: left; white-space: pre; word-spacing: normal; tab-size: 4;\"><span class=\"token tag\" style=\"margin: 0px; padding: 0px; border: 0px; color: #990055;\"><span class=\"token tag\" style=\"margin: 0px; padding: 0px; border: 0px; color: #990055;\"><span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">&lt;<\/span>audio<\/span> <span class=\"token attr-name\" style=\"margin: 0px; padding: 0px; border: 0px; color: #669900;\">id<\/span><span class=\"token attr-value\" style=\"margin: 0px; padding: 0px; border: 0px; color: #0077aa;\"><span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">=<\/span><span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">\"<\/span>demo<span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">\"<\/span><\/span> <span class=\"token attr-name\" style=\"margin: 0px; padding: 0px; border: 0px; color: #669900;\">src<\/span><span class=\"token attr-value\" style=\"margin: 0px; padding: 0px; border: 0px; color: #0077aa;\"><span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">=<\/span><span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">\"<\/span>audio.mp3<span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">\"<\/span><\/span><span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">&gt;<\/span><\/span><span class=\"token tag\" style=\"margin: 0px; padding: 0px; border: 0px; color: #990055;\"><span class=\"token tag\" style=\"margin: 0px; padding: 0px; border: 0px; color: #990055;\"><span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">&lt;\/<\/span>audio<\/span><span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">&gt;<\/span><\/span>\n<span class=\"token tag\" style=\"margin: 0px; padding: 0px; border: 0px; color: #990055;\"><span class=\"token tag\" style=\"margin: 0px; padding: 0px; border: 0px; color: #990055;\"><span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">&lt;<\/span>div<\/span><span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">&gt;<\/span><\/span>\n  <span class=\"token tag\" style=\"margin: 0px; padding: 0px; border: 0px; color: #990055;\"><span class=\"token tag\" style=\"margin: 0px; padding: 0px; border: 0px; color: #990055;\"><span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">&lt;<\/span>button<\/span> <span class=\"token attr-name\" style=\"margin: 0px; padding: 0px; border: 0px; color: #669900;\">onclick<\/span><span class=\"token attr-value\" style=\"margin: 0px; padding: 0px; border: 0px; color: #0077aa;\"><span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">=<\/span><span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">\"<\/span>document.getElementById('demo').play()<span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">\"<\/span><\/span><span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">&gt;<\/span><\/span>Reproducir el Audio<span class=\"token tag\" style=\"margin: 0px; padding: 0px; border: 0px; color: #990055;\"><span class=\"token tag\" style=\"margin: 0px; padding: 0px; border: 0px; color: #990055;\"><span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">&lt;\/<\/span>button<\/span><span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">&gt;<\/span><\/span>\n  <span class=\"token tag\" style=\"margin: 0px; padding: 0px; border: 0px; color: #990055;\"><span class=\"token tag\" style=\"margin: 0px; padding: 0px; border: 0px; color: #990055;\"><span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">&lt;<\/span>button<\/span> <span class=\"token attr-name\" style=\"margin: 0px; padding: 0px; border: 0px; color: #669900;\">onclick<\/span><span class=\"token attr-value\" style=\"margin: 0px; padding: 0px; border: 0px; color: #0077aa;\"><span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">=<\/span><span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">\"<\/span>document.getElementById('demo').pause()<span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">\"<\/span><\/span><span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">&gt;<\/span><\/span>Pausar el Audio<span class=\"token tag\" style=\"margin: 0px; padding: 0px; border: 0px; color: #990055;\"><span class=\"token tag\" style=\"margin: 0px; padding: 0px; border: 0px; color: #990055;\"><span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">&lt;\/<\/span>button<\/span><span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">&gt;<\/span><\/span>\n  <span class=\"token tag\" style=\"margin: 0px; padding: 0px; border: 0px; color: #990055;\"><span class=\"token tag\" style=\"margin: 0px; padding: 0px; border: 0px; color: #990055;\"><span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">&lt;<\/span>button<\/span> <span class=\"token attr-name\" style=\"margin: 0px; padding: 0px; border: 0px; color: #669900;\">onclick<\/span><span class=\"token attr-value\" style=\"margin: 0px; padding: 0px; border: 0px; color: #0077aa;\"><span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">=<\/span><span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">\"<\/span>document.getElementById('demo').volume+<span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">=<\/span>0.1<span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">\"<\/span><\/span><span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">&gt;<\/span><\/span>Aumentar el Volumen<span class=\"token tag\" style=\"margin: 0px; padding: 0px; border: 0px; color: #990055;\"><span class=\"token tag\" style=\"margin: 0px; padding: 0px; border: 0px; color: #990055;\"><span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">&lt;\/<\/span>button<\/span><span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">&gt;<\/span><\/span>\n  <span class=\"token tag\" style=\"margin: 0px; padding: 0px; border: 0px; color: #990055;\"><span class=\"token tag\" style=\"margin: 0px; padding: 0px; border: 0px; color: #990055;\"><span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">&lt;<\/span>button<\/span> <span class=\"token attr-name\" style=\"margin: 0px; padding: 0px; border: 0px; color: #669900;\">onclick<\/span><span class=\"token attr-value\" style=\"margin: 0px; padding: 0px; border: 0px; color: #0077aa;\"><span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">=<\/span><span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">\"<\/span>document.getElementById('demo').volume-<span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">=<\/span>0.1<span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">\"<\/span><\/span><span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">&gt;<\/span><\/span>Disminuir el Volumen<span class=\"token tag\" style=\"margin: 0px; padding: 0px; border: 0px; color: #990055;\"><span class=\"token tag\" style=\"margin: 0px; padding: 0px; border: 0px; color: #990055;\"><span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">&lt;\/<\/span>button<\/span><span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">&gt;<\/span><\/span>\n<span class=\"token tag\" style=\"margin: 0px; padding: 0px; border: 0px; color: #990055;\"><span class=\"token tag\" style=\"margin: 0px; padding: 0px; border: 0px; color: #990055;\"><span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">&lt;\/<\/span>div<\/span><span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">&gt;<\/span><\/span><\/code><\/pre>\n<h2 id=\"Deteniendo_la_descarga_de_contenido_multimedia\" style=\"margin: 0px 0px 12px; padding: 0px; border: 0px; font-weight: bold; font-family: 'Open Sans', sans-serif; line-height: 30px; font-size: 2.142857142857143rem; letter-spacing: -1px; color: #4d4e53; font-style: normal; font-variant: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: #ffffff;\">Deteniendo la descarga de contenido multimedia<\/h2>\n<p style=\"margin: 0px 0px 24px; padding: 0px; border: 0px; color: #4d4e53; font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: #ffffff;\">Mientras que detener la reproducci\u00f3n multimedia es tan f\u00e1cil como llamar al m\u00e9todo pause() del elemento, el navegador sigue descargando el contenido multimedia hasta que el elemento multimedia es eliminado<span class=\"Apple-converted-space\">\u00a0<\/span><span id=\"result_box\" lang=\"es\" style=\"margin: 0px; padding: 0px; border: 0px;\"><span class=\"hps\" style=\"margin: 0px; padding: 0px; border: 0px;\">a trav\u00e9s de<\/span><span class=\"Apple-converted-space\">\u00a0<\/span><span class=\"hps\" style=\"margin: 0px; padding: 0px; border: 0px;\">la recolecci\u00f3n de basura<\/span><\/span>.<\/p>\n<p style=\"margin: 0px 0px 24px; padding: 0px; border: 0px; color: #4d4e53; font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: #ffffff;\">Aqu\u00ed un truco para detener la descarga de una sola vez:<\/p>\n<pre class=\"brush: js  language-js\" style=\"margin: 0.5em 0px; padding: 1em 0px 1em 30px; border-width: 0px 0px 0px 6px; border-left-style: solid; border-left-color: rgba(0, 83, 159, 0.65098); background-image: url('https:\/\/developer.cdn.mozilla.net\/media\/redesign\/img\/blueprint-dark.png'); background-color: rgba(234, 239, 242, 0.247059); overflow: auto; line-height: 1.5em; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; font-family: Consolas, Monaco, 'Andale Mono', monospace; color: #4d4e53; text-shadow: none; direction: ltr; text-align: left; white-space: pre; word-spacing: 0px; tab-size: 4; position: relative; letter-spacing: normal; orphans: auto; text-indent: 0px; text-transform: none; widows: auto; -webkit-text-stroke-width: 0px; background-position: 50% 0%; background-repeat: repeat repeat;\" data-number=\"\"><code class=\" language-js\" style=\"margin: 0px; padding: 0px; border: 0px; font-style: normal; font-weight: inherit; font-variant: normal; font-size: 14px; line-height: normal; font-family: Consolas, Monaco, 'Andale Mono', monospace; color: inherit; text-shadow: none; direction: ltr; text-align: left; white-space: pre; word-spacing: normal; tab-size: 4;\"><span class=\"token keyword\" style=\"margin: 0px; padding: 0px; border: 0px; color: #0077aa;\">var<\/span> mediaElement <span class=\"token operator\" style=\"margin: 0px; padding: 0px; border: 0px; color: #a67f59; background-color: rgba(255, 255, 255, 0.498039); background-position: initial initial; background-repeat: initial initial;\">=<\/span> document<span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">.<\/span><span class=\"token function\" style=\"margin: 0px; padding: 0px; border: 0px;\">getElementById<span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">(<\/span><\/span><span class=\"token string\" style=\"margin: 0px; padding: 0px; border: 0px; color: #669900;\">\"myMediaElementID\"<\/span><span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">)<\/span><span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">;<\/span>\nmediaElement<span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">.<\/span><span class=\"token function\" style=\"margin: 0px; padding: 0px; border: 0px;\">pause<span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">(<\/span><\/span><span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">)<\/span><span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">;<\/span>\nmediaElement<span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">.<\/span>src <span class=\"token operator\" style=\"margin: 0px; padding: 0px; border: 0px; color: #a67f59; background-color: rgba(255, 255, 255, 0.498039); background-position: initial initial; background-repeat: initial initial;\">=<\/span> <span class=\"token string\" style=\"margin: 0px; padding: 0px; border: 0px; color: #669900;\">\"\"<\/span><span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">;<\/span><\/code><\/pre>\n<p style=\"margin: 0px 0px 24px; padding: 0px; border: 0px; color: #4d4e53; font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: #ffffff;\">Estableciendo una cadena vac\u00eda al atributo<span class=\"Apple-converted-space\">\u00a0<\/span><code style=\"margin: 0px; padding: 0px; border: 0px; font-style: normal; font-weight: inherit; font-variant: normal; font-size: 14px; line-height: normal; font-family: 'Courier New', 'Andale Mono', monospace;\">src<\/code><span class=\"Apple-converted-space\">\u00a0<\/span>del elemento multimedia, tu destruyes el decodificador interno del elemento con lo que detienes la descarga.<\/p>\n<h2 id=\"Buscando_a_trav.C3.A9s_de_los_medios_de_comunicaci.C3.B3n\" style=\"margin: 0px 0px 0.8em; padding: 0px; border: 0px; font-weight: bold; font-family: 'Open Sans', sans-serif; line-height: 30px; font-size: 2.142857142857143rem; letter-spacing: -1px; color: #4d4e53; font-style: normal; font-variant: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: #ffffff;\">Buscando a trav\u00e9s de los medios de comunicaci\u00f3n<\/h2>\n<p style=\"margin: 0px 0px 1.286em; padding: 0px; border: 0px; color: #4d4e53; font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.5em; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: #ffffff;\">Elementos de los medios de comunicaci\u00f3n proporcionan apoyo para mover la posici\u00f3n de reproducci\u00f3n actual a puntos espec\u00edficos en el contenido de los medios.\u00a0Esto se hace estableciendo el valor de la\u00a0<code style=\"margin: 0px; padding: 0px; border: 0px; font-style: normal; font-weight: inherit; font-variant: normal; font-size: 14px; line-height: normal; font-family: 'Courier New', 'Andale Mono', monospace;\">horaActual<\/code>\u00a0propiedad en el elemento; ver\u00a0<a class=\"new\" style=\"margin: 0px; padding: 0px; border: 0px; text-decoration: none; color: #990000;\" title=\"\/ Es \/ docs \/ Web \/ API \/ HTMLMediaElement\" href=\"https:\/\/developer.mozilla.org\/es\/docs\/Web\/API\/HTMLMediaElement\"><code style=\"margin: 0px; padding: 0px; border: 0px; font-style: normal; font-weight: inherit; font-variant: normal; font-size: 14px; line-height: normal; font-family: 'Courier New', 'Andale Mono', monospace;\">HTMLMediaElement<\/code><\/a>para m\u00e1s detalles sobre las propiedades del elemento.\u00a0Basta con establecer el valor en el tiempo, en segundos, con el que desea reproducir para continuar.<\/p>\n<p style=\"margin: 0px 0px 24px; padding: 0px; border: 0px; color: #4d4e53; font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: #ffffff;\"><span style=\"margin: 0px; padding: 0px; border: 0px; line-height: 1.5em;\">Usted puede utilizar el elemento\u00a0<\/span><code style=\"margin: 0px; padding: 0px; border: 0px; font-style: normal; font-weight: inherit; font-variant: normal; font-size: 14px; line-height: normal; font-family: 'Courier New', 'Andale Mono', monospace;\">seekable<\/code><span style=\"margin: 0px; padding: 0px; border: 0px; line-height: 1.5em;\">\u00a0propiedad para determinar los rangos de los medios de comunicaci\u00f3n que est\u00e1n disponibles para la b\u00fasqueda de la actualidad.\u00a0Esto devuelve una\u00a0<\/span><a class=\"new\" style=\"margin: 0px; padding: 0px; border: 0px; text-decoration: none; color: #990000; line-height: 1.5em;\" title=\"\/ Es \/ docs \/ Web \/ API \/ TimeRanges\" href=\"https:\/\/developer.mozilla.org\/es\/docs\/Web\/API\/TimeRanges\"><code style=\"margin: 0px; padding: 0px; border: 0px; font-style: normal; font-weight: inherit; font-variant: normal; font-size: 14px; line-height: normal; font-family: 'Courier New', 'Andale Mono', monospace;\">TimeRanges<\/code><\/a><span style=\"margin: 0px; padding: 0px; border: 0px; line-height: 1.5em;\">\u00a0objeto que enumera los rangos de veces que se puede tratar de:<\/span><\/p>\n<pre class=\"brush: js  language-js\" style=\"margin: 0.5em 0px; padding: 1em 0px 1em 30px; border-width: 0px 0px 0px 6px; border-left-style: solid; border-left-color: rgba(0, 83, 159, 0.65098); background-image: url('https:\/\/developer.cdn.mozilla.net\/media\/redesign\/img\/blueprint-dark.png'); background-color: rgba(234, 239, 242, 0.247059); overflow: auto; line-height: 1.5em; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; font-family: Consolas, Monaco, 'Andale Mono', monospace; color: #4d4e53; text-shadow: none; direction: ltr; text-align: left; white-space: pre; word-spacing: 0px; tab-size: 4; position: relative; letter-spacing: normal; orphans: auto; text-indent: 0px; text-transform: none; widows: auto; -webkit-text-stroke-width: 0px; background-position: 50% 0%; background-repeat: repeat repeat;\" data-number=\"\"><code class=\" language-js\" style=\"margin: 0px; padding: 0px; border: 0px; font-style: normal; font-weight: inherit; font-variant: normal; font-size: 14px; line-height: normal; font-family: Consolas, Monaco, 'Andale Mono', monospace; color: inherit; text-shadow: none; direction: ltr; text-align: left; white-space: pre; word-spacing: normal; tab-size: 4;\"><span class=\"token keyword\" style=\"margin: 0px; padding: 0px; border: 0px; color: #0077aa;\">var<\/span> mediaElement <span class=\"token operator\" style=\"margin: 0px; padding: 0px; border: 0px; color: #a67f59; background-color: rgba(255, 255, 255, 0.498039); background-position: initial initial; background-repeat: initial initial;\">=<\/span> document<span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">.<\/span><span class=\"token function\" style=\"margin: 0px; padding: 0px; border: 0px;\">getElementById<span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">(<\/span><\/span><span class=\"token string\" style=\"margin: 0px; padding: 0px; border: 0px; color: #669900;\">'mediaElementID'<\/span><span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">)<\/span><span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">;<\/span>\nmediaElement<span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">.<\/span>seekable<span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">.<\/span><span class=\"token function\" style=\"margin: 0px; padding: 0px; border: 0px;\">start<span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">(<\/span><\/span><span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">)<\/span><span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">;<\/span> <span class=\"token comment\" style=\"margin: 0px; padding: 0px; border: 0px; display: inherit; color: #708090;\" spellcheck=\"true\"> \/\/ Returns the starting time (in seconds)\n<\/span>mediaElement<span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">.<\/span>seekable<span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">.<\/span><span class=\"token function\" style=\"margin: 0px; padding: 0px; border: 0px;\">end<span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">(<\/span><\/span><span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">)<\/span><span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">;<\/span>   <span class=\"token comment\" style=\"margin: 0px; padding: 0px; border: 0px; display: inherit; color: #708090;\" spellcheck=\"true\"> \/\/ Returns the ending time (in seconds)\n<\/span>mediaElement<span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">.<\/span>currentTime <span class=\"token operator\" style=\"margin: 0px; padding: 0px; border: 0px; color: #a67f59; background-color: rgba(255, 255, 255, 0.498039); background-position: initial initial; background-repeat: initial initial;\">=<\/span> <span class=\"token number\" style=\"margin: 0px; padding: 0px; border: 0px; color: #990055;\">122<\/span><span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">;<\/span><span class=\"token comment\" style=\"margin: 0px; padding: 0px; border: 0px; display: inherit; color: #708090;\" spellcheck=\"true\"> \/\/ Seek to 122 seconds\n<\/span>mediaElement<span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">.<\/span>played<span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">.<\/span><span class=\"token function\" style=\"margin: 0px; padding: 0px; border: 0px;\">end<span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">(<\/span><\/span><span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">)<\/span><span class=\"token punctuation\" style=\"margin: 0px; padding: 0px; border: 0px; color: #999999;\">;<\/span>     <span class=\"token comment\" style=\"margin: 0px; padding: 0px; border: 0px; display: inherit; color: #708090;\" spellcheck=\"true\"> \/\/ Returns the number of seconds the browser has played<\/span><\/code><\/pre>\n<h2 id=\"Especificaci.C3.B3n_del_rango_de_reproducci.C3.B3n\" style=\"margin: 0px 0px 0.8em; padding: 0px; border: 0px; font-weight: bold; font-family: 'Open Sans', sans-serif; line-height: 30px; font-size: 2.142857142857143rem; letter-spacing: -1px; color: #4d4e53; font-style: normal; font-variant: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: #ffffff;\">Especificaci\u00f3n del rango de reproducci\u00f3n<\/h2>\n<p style=\"margin: 0px 0px 1.286em; padding: 0px; border: 0px; color: #4d4e53; font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.5em; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: #ffffff;\">Al especificar el URI de los medios de comunicaci\u00f3n para una\u00a0<a style=\"margin: 0px; padding: 0px; border: 0px; text-decoration: none; color: #0095dd;\" href=\"https:\/\/developer.mozilla.org\/es\/docs\/HTML\/Elemento\/audio\"><code style=\"margin: 0px; padding: 0px; border: 0px; font-style: normal; font-weight: inherit; font-variant: normal; font-size: 14px; line-height: normal; font-family: 'Courier New', 'Andale Mono', monospace;\">&lt;audio&gt;<\/code><\/a>\u00a0o\u00a0<a style=\"margin: 0px; padding: 0px; border: 0px; text-decoration: none; color: #0095dd;\" href=\"https:\/\/developer.mozilla.org\/es\/docs\/HTML\/Elemento\/video\"><code style=\"margin: 0px; padding: 0px; border: 0px; font-style: normal; font-weight: inherit; font-variant: normal; font-size: 14px; line-height: normal; font-family: 'Courier New', 'Andale Mono', monospace;\">&lt;video&gt;<\/code><\/a>\u00a0elemento, puede incluir opcionalmente informaci\u00f3n adicional para especificar la parte de los medios de comunicaci\u00f3n para jugar.\u00a0Para ello, a\u00f1ada una almohadilla (&#8220;#&#8221;), seguido de la descripci\u00f3n fragmento de medios de comunicaci\u00f3n.<\/p>\n<p style=\"margin: 0px 0px 24px; padding: 0px; border: 0px; color: #4d4e53; font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: #ffffff;\"><span style=\"margin: 0px; padding: 0px; border: 0px; line-height: 1.5em;\">Un intervalo de tiempo se especifica mediante la sintaxis:<\/span><\/p>\n<pre class=\"language-html\" style=\"margin: 0.5em 0px; padding: 1em; border-width: 0px 0px 0px 6px; border-left-style: solid; border-left-color: rgba(0, 83, 159, 0.65098); background-image: url('https:\/\/developer.cdn.mozilla.net\/media\/redesign\/img\/blueprint-dark.png'); background-color: rgba(234, 239, 242, 0.247059); overflow: auto; line-height: 1.5em; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; font-family: Consolas, Monaco, 'Andale Mono', monospace; color: #4d4e53; text-shadow: none; direction: ltr; text-align: left; white-space: pre; word-spacing: 0px; tab-size: 4; letter-spacing: normal; orphans: auto; text-indent: 0px; text-transform: none; widows: auto; -webkit-text-stroke-width: 0px; background-position: 50% 0%; background-repeat: repeat repeat;\">#t=[starttime][,endtime]<\/pre>\n<p style=\"margin: 0px 0px 1.286em; padding: 0px; border: 0px; color: #4d4e53; font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.5em; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: #ffffff;\">El tiempo se puede especificar como un n\u00famero 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).<\/p>\n<p style=\"margin: 0px 0px 1.286em; padding: 0px; border: 0px; color: #4d4e53; font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.5em; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: #ffffff;\">Algunos ejemplos:<\/p>\n<dl style=\"margin: 0px 0px 20px; padding: 0px; border: 0px; color: #4d4e53; font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: #ffffff;\">\n<dt style=\"margin: 0px; padding: 0px; border: 0px; font-style: normal; font-weight: bold; line-height: 22px;\"><span class=\"nowiki\" style=\"margin: 0px; padding: 0px; border: 0px;\">http:\/\/foo.com\/video.ogg # t = 10,20<\/span><\/dt>\n<dd style=\"margin: 0px 0px 24px; padding: 0px 0px 0px 20px; border: 0px; line-height: 22px;\">Especifica que el v\u00eddeo debe desempe\u00f1ar el rango de 10 segundos a trav\u00e9s de 20 segundos.<\/dd>\n<dt style=\"margin: 0px; padding: 0px; border: 0px; font-style: normal; font-weight: bold; line-height: 22px;\"><span class=\"nowiki\" style=\"margin: 0px; padding: 0px; border: 0px;\">http:\/\/foo.com\/video.ogg # t =, 10.5<\/span><\/dt>\n<dd style=\"margin: 0px 0px 24px; padding: 0px 0px 0px 20px; border: 0px; line-height: 22px;\">Especifica que el v\u00eddeo se reproducir\u00e1 desde el principio a trav\u00e9s de 10,5 segundos.<\/dd>\n<dt style=\"margin: 0px; padding: 0px; border: 0px; font-style: normal; font-weight: bold; line-height: 22px;\"><span class=\"nowiki\" style=\"margin: 0px; padding: 0px; border: 0px;\">http:\/\/foo.com\/video.ogg # t =, 02:00:00<\/span><\/dt>\n<dd style=\"margin: 0px 0px 24px; padding: 0px 0px 0px 20px; border: 0px; line-height: 22px;\">Especifica que el v\u00eddeo se reproducir\u00e1 desde el principio a trav\u00e9s de dos horas.<\/dd>\n<dt style=\"margin: 0px; padding: 0px; border: 0px; font-style: normal; font-weight: bold; line-height: 22px;\"><span class=\"nowiki\" style=\"margin: 0px; padding: 0px; border: 0px;\">http:\/\/foo.com\/video.ogg # t = 60<\/span><\/dt>\n<dd style=\"margin: 0px 0px 24px; padding: 0px 0px 0px 20px; border: 0px; line-height: 22px;\">Especifica que el v\u00eddeo debe empezar a jugar a los 60 segundos y jugar hasta el final del v\u00eddeo.<\/dd>\n<\/dl>\n","protected":false},"excerpt":{"rendered":"<p>HTML5 introduce soporte integrado para el contenido multimedia gracias a los elementos\u00a0&lt;audio&gt;\u00a0y\u00a0&lt;video&gt;, ofreciendo la posibilidad de insertar contenido multimedia en documentos HTML. Insertando contenido multimedia<\/p>\n","protected":false},"author":1,"featured_media":41,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11,26],"tags":[542,1087,2483,3725,5274],"class_list":["post-12316","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-codigo-fuente-2","category-html5","tag-audio","tag-codigo-fuente-3","tag-html5-2","tag-pagina-web","tag-video","entry"],"_links":{"self":[{"href":"https:\/\/ctrl-x.com.mx\/ctrlx\/wp-json\/wp\/v2\/posts\/12316","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ctrl-x.com.mx\/ctrlx\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ctrl-x.com.mx\/ctrlx\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ctrl-x.com.mx\/ctrlx\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ctrl-x.com.mx\/ctrlx\/wp-json\/wp\/v2\/comments?post=12316"}],"version-history":[{"count":0,"href":"https:\/\/ctrl-x.com.mx\/ctrlx\/wp-json\/wp\/v2\/posts\/12316\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ctrl-x.com.mx\/ctrlx\/wp-json\/wp\/v2\/media\/41"}],"wp:attachment":[{"href":"https:\/\/ctrl-x.com.mx\/ctrlx\/wp-json\/wp\/v2\/media?parent=12316"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ctrl-x.com.mx\/ctrlx\/wp-json\/wp\/v2\/categories?post=12316"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ctrl-x.com.mx\/ctrlx\/wp-json\/wp\/v2\/tags?post=12316"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}