{"id":2297,"date":"2014-10-22T22:37:22","date_gmt":"2014-10-22T20:37:22","guid":{"rendered":"http:\/\/descartesjs.org\/documentacion\/?p=2297"},"modified":"2021-08-06T16:10:58","modified_gmt":"2021-08-06T15:10:58","slug":"audio-y-video-mediante-espacios-htmliframe","status":"publish","type":"post","link":"https:\/\/reddescartes.org\/documentacion\/audio-y-video-mediante-espacios-htmliframe\/","title":{"rendered":"Audio y v\u00eddeo mediante espacios HTMLIframe"},"content":{"rendered":"<p>HTML5 cuenta con etiquetas espec\u00edficas para incorporar y gestionar los audios y v\u00eddeos. Una explicaci\u00f3n de \u00e9stas puede encontrarla por ejemplo en <a href=\"https:\/\/developer.mozilla.org\/es\/docs\/Web\/HTML\/Usando_audio_y_video_con_HTML5\">este enlace<\/a>. Ah\u00ed puede observar la&nbsp;alternativa de usar el elemento &lt;source&gt;<span style=\"font-family: monospace;\">&nbsp;<\/span>para especificar m\u00faltiples fuentes de archivos <span id=\"result_box\" lang=\"es\"><span class=\"hps\">con el fin de<\/span> <span class=\"hps\">proporcionar v\u00eddeo<\/span> <span class=\"hps\">o<\/span> <span class=\"hps\">audio&nbsp;<\/span><span class=\"hps\">codificados en formatos<\/span> <span class=\"hps\">diferentes<\/span> <span class=\"hps\">para<\/span> <span class=\"hps\">diferentes navegadores salvando posibles incompatibilidades (al final de <a href=\"https:\/\/descartesjs.org\/documentacion\/?p=1322\">este art\u00edculo<\/a>&nbsp;puede leer el comentario acerca de la compatibilidad de formatos de audio y v\u00eddeo y los navegadores).<\/span><\/span><\/p>\n<div id=\"attachment_2304\" style=\"width: 550px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/descartesjs.org\/documentacion\/wp-content\/uploads\/2014\/10\/etiquetavideo.jpg\"><img aria-describedby=\"caption-attachment-2304\" class=\"wp-image-2304 size-full\" src=\"https:\/\/descartesjs.org\/documentacion\/wp-content\/uploads\/2014\/10\/etiquetavideo.jpg\" alt=\"Uso de diferentes fuentes para un v\u00eddeo\" width=\"540\" height=\"146\" srcset=\"https:\/\/reddescartes.org\/documentacion\/wp-content\/uploads\/2014\/10\/etiquetavideo.jpg 540w, https:\/\/reddescartes.org\/documentacion\/wp-content\/uploads\/2014\/10\/etiquetavideo-300x81.jpg 300w\" sizes=\"(max-width: 540px) 100vw, 540px\" \/><\/a><p id=\"caption-attachment-2304\" class=\"wp-caption-text\">Uso de diferentes fuentes para un v\u00eddeo<\/p><\/div>\n<p>&nbsp;<\/p>\n<p>El c\u00f3digo anterior 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. Obviamente el coste se centra en que es necesario contar con un mismo soporte en diferentes formatos, es decir una conversi\u00f3n previa a los formatos deseados, y el almacenamiento adicional necesario&nbsp;para cada fichero.<\/p>\n<p>Dado que Descartes cuenta con espacios HTMLIframe que permiten embeber c\u00f3digo HTML5 una alternativa para incluir audios y v\u00eddeos en una escena y evitar esas posibles incompatibildiades puede ser construir una p\u00e1gina html que gestione esos recursos utilizando el c\u00f3digo HTML5 descrito y embeber esa p\u00e1gina en un espacio&nbsp;de ese tipo. El control de esos recursos (reproducci\u00f3n, pausa y parada, etc.), vendr\u00e1 aportado por el propio HTML y los par\u00e1metros que desee incluir en \u00e9l. Aqu\u00ed Descartes act\u00faa como mero contenedor.<\/p>\n<p>En la siguiente escena puede observarlo:<\/p>\n<p style=\"text-align: center;\">\n<!-- iframe plugin v.4.5 wordpress.org\/plugins\/iframe\/ -->\n<iframe src=\"https:\/\/descartesjs.org\/repositorio\/ControlAudioVideo_JS\/index2.html\" width=\"680\" height=\"525\" scrolling=\"yes\" class=\"iframe-class\" frameborder=\"0\"><\/iframe>\n<\/p>\n<p style=\"text-align: left;\">Obviamente esta estrategia tambi\u00e9n puede usarse para embeber otros audios y v\u00eddeos publicados en la red. Por ejemplo desde youtube, como podemos observar en la siguiente escena:<\/p>\n<p style=\"text-align: center;\">\n<!-- iframe plugin v.4.5 wordpress.org\/plugins\/iframe\/ -->\n<iframe src=\"https:\/\/descartesjs.org\/repositorio\/ControlAudioVideo_JS\/index3.html\" width=\"680\" height=\"525\" scrolling=\"yes\" class=\"iframe-class\" frameborder=\"0\"><\/iframe>\n<\/p>\n<p style=\"text-align: center;\">(Puede descargar la escena anterior y \u00e9sta desde <a href=\"https:\/\/descartesjs.org\/repositorio\/ControlAudioVideo_JS.zip\">este enlace<\/a>)<\/p>\n","protected":false},"excerpt":{"rendered":"<p>HTML5 cuenta con etiquetas espec\u00edficas para incorporar y gestionar los audios y v\u00eddeos. Una explicaci\u00f3n de \u00e9stas puede encontrarla por ejemplo en este enlace. Ah\u00ed puede observar la&nbsp;alternativa de usar el elemento &lt;source&gt;&nbsp;para especificar m\u00faltiples fuentes de archivos con el fin de proporcionar v\u00eddeo o audio&nbsp;codificados en formatos diferentes para diferentes navegadores salvando posibles incompatibilidades (al final de este art\u00edculo&nbsp;puede leer el comentario acerca de la compatibilidad de formatos de audio y v\u00eddeo y los navegadores). &nbsp; El c\u00f3digo anterior reproduce el archivo Ogg en navegadores que admiten el formato Ogg. Si el navegador no admite Ogg, el navegador usar\u00e1<\/p>\n<a class=\"more-link\" rel=\"nofollow\" href=\"https:\/\/reddescartes.org\/documentacion\/audio-y-video-mediante-espacios-htmliframe\/\">[Leer m\u00e1s...]<\/a>","protected":false},"author":9,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[96,97],"tags":[],"_links":{"self":[{"href":"https:\/\/reddescartes.org\/documentacion\/wp-json\/wp\/v2\/posts\/2297"}],"collection":[{"href":"https:\/\/reddescartes.org\/documentacion\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/reddescartes.org\/documentacion\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/reddescartes.org\/documentacion\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/reddescartes.org\/documentacion\/wp-json\/wp\/v2\/comments?post=2297"}],"version-history":[{"count":8,"href":"https:\/\/reddescartes.org\/documentacion\/wp-json\/wp\/v2\/posts\/2297\/revisions"}],"predecessor-version":[{"id":3290,"href":"https:\/\/reddescartes.org\/documentacion\/wp-json\/wp\/v2\/posts\/2297\/revisions\/3290"}],"wp:attachment":[{"href":"https:\/\/reddescartes.org\/documentacion\/wp-json\/wp\/v2\/media?parent=2297"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/reddescartes.org\/documentacion\/wp-json\/wp\/v2\/categories?post=2297"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/reddescartes.org\/documentacion\/wp-json\/wp\/v2\/tags?post=2297"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}