{"id":1322,"date":"2014-04-23T20:32:49","date_gmt":"2014-04-23T18:32:49","guid":{"rendered":"http:\/\/descartesjs.org\/documentacion\/?p=1322"},"modified":"2021-08-07T17:47:57","modified_gmt":"2021-08-07T16:47:57","slug":"audio-video","status":"publish","type":"post","link":"https:\/\/reddescartes.org\/documentacion\/audio-video\/","title":{"rendered":"Audio &#8211; Video"},"content":{"rendered":"<p>Los controles de <strong>audio<\/strong> y <strong>video<\/strong> permiten reproducir ficheros de sonido y de video incorporados en una escena.<\/p>\n<p>Este tipo de control tiene un panel de configuraci\u00f3n como el que se muestra en la imagen siguiente:<\/p>\n<p><a href=\"https:\/\/descartesjs.org\/documentacion\/wp-content\/uploads\/2014\/04\/conContSon.png\"><img class=\"size-full wp-image-1323 aligncenter\" src=\"https:\/\/descartesjs.org\/documentacion\/wp-content\/uploads\/2014\/04\/conContSon.png\" alt=\"conContSon\" width=\"824\" height=\"438\" srcset=\"https:\/\/reddescartes.org\/documentacion\/wp-content\/uploads\/2014\/04\/conContSon.png 824w, https:\/\/reddescartes.org\/documentacion\/wp-content\/uploads\/2014\/04\/conContSon-300x159.png 300w\" sizes=\"(max-width: 824px) 100vw, 824px\" \/><\/a><\/p>\n<p>Los elementos a definir son:<\/p>\n<ul>\n<li><strong>id<\/strong>. Es el identificador del control.<\/li>\n<li><strong>(region)<\/strong>. Regi\u00f3n a la que se asigna el control num\u00e9rico. las opciones son: <strong>norte<\/strong>, <strong>sur<\/strong>, <strong>este<\/strong>, <strong>oeste<\/strong>, <strong>exterior<\/strong> e <strong>interior<\/strong>.\n<ul>\n<li>La regi\u00f3n <strong>norte<\/strong> es una o varias filas horizontales en la parte superior de la escena entre los botones de cr\u00e9ditos y config.<\/li>\n<li>La regi\u00f3n <strong>sur<\/strong> es una o varias filas horizontales en la parte inferior de la escena entre los botones de inicio y limpiar.<\/li>\n<li>Las regiones<strong> oeste<\/strong> y <strong>este<\/strong> son columnas a la izquierda y a la derecha de la escena.<\/li>\n<li>La regi\u00f3n <strong>exterior <\/strong>es una ventana que aparece cuando se hace un clic derecho sobre la escena.<\/li>\n<li>La regi\u00f3n <strong>interior<\/strong> es la escena. Cuando un control num\u00e9rico se asocia a la regi\u00f3n interior, entonces se puede colocar en cualquiera de los espacios de la escena y su posici\u00f3n ah\u00ed est\u00e1 determinada por el par\u00e1metro <strong>pos<\/strong>.<br \/>\nEl valor por defecto es \u201c<strong>sur\u201d<\/strong>.<\/li>\n<\/ul>\n<\/li>\n<li><strong><strong>espacio<\/strong>. <\/strong>Es un men\u00fa desplegable que permite elegir el espacio al que se desea asignar el control. Este par\u00e1metro s\u00f3lo tiene sentido en controles num\u00e9ricos asignados a la regi\u00f3n interior (y en controles gr\u00e1ficos). El men\u00fa muestra los identificadores de todos los espacios definidos en la escena.\u00a0En el caso de que el control sea interior se puede usar una expresi\u00f3n de cuatro valores (x,y,w,h) donde los primeros dos son las coordenadas del v\u00e9rtice superior izquierdo del control y los dos \u00faltimos son el ancho y el alto.<\/li>\n<li><strong>pos<\/strong>. Es el extremo superior izquierdo del control. Se expresa con dos n\u00fameros entre par\u00e9ntesis separados por una coma. Los n\u00fameros pueden ser constantes o expresiones en las que intervienen constantes o par\u00e1metros definidos en controles anteriores. El valor por defecto es (0,0).<\/li>\n<li><strong>dibujar-si<\/strong>. Expresi\u00f3n booleana que determina cu\u00e1ndo el control es visible.El valor por defecto es vac\u00edo y en ese caso el control es siempre visible.<\/li>\n<li><strong>archivo<\/strong>. Direcci\u00f3n del archivo multimedia de audio o v\u00eddeo asociado al control.<\/li>\n<\/ul>\n<p align=\"justify\">La siguiente escena muestra un control de audio y un control de v\u00eddeo que puede ser reproducido\/pausado\/parado bien desde el propio reproductor del control o a trav\u00e9s de unos controles num\u00e9ricos tipo bot\u00f3n. En este \u00faltimo caso, cuando se pulsa sobre el bot\u00f3n, se ejecutar\u00edan las funciones<strong> id.play()<\/strong>, <strong>id.pause()<\/strong> y <strong>id.stop()<\/strong> para, respectivamente, reproducir, pausar y parar el control. El valor de <strong>id<\/strong> es el identificador del control.<\/p>\n<p style=\"text-align: center;\" align=\"justify\">\n<!-- iframe plugin v.4.5 wordpress.org\/plugins\/iframe\/ -->\n<iframe src=\"https:\/\/descartesjs.org\/repositorio\/ControlAudioVideo_JS\/index1.html\" width=\"565\" height=\"425\" scrolling=\"yes\" class=\"iframe-class\" frameborder=\"0\"><\/iframe>\n<\/p>\n<p style=\"text-align: left;\" align=\"justify\">\u00a0La escena anterior puede descargarla desde <a href=\"https:\/\/descartesjs.org\/repositorio\/ControlAudioVideo_JS\">este enlace<\/a>.<\/p>\n<h3 style=\"text-align: left;\" align=\"justify\"><\/h3>\n<hr \/>\n<h3 style=\"text-align: left;\" align=\"justify\"><\/h3>\n<h3 style=\"text-align: left;\" align=\"justify\">Comentario en relaci\u00f3n a los formatos de los audios y de los v\u00eddeos y su compatibilidad con los navegadores.<\/h3>\n<p>No todos los navegadores soportan los mismos formatos de v\u00eddeo. Este hecho es provocado principalmente por problemas con las patentes. En <a href=\"https:\/\/developer.mozilla.org\/es\/docs\/Web\/HTML\/Formatos_admitidos_de_audio_y_video_en_html5\">este enlace<\/a>\u00a0tenemos una detallada informaci\u00f3n sobre los formatos de audio y v\u00eddeo soportados en HTML5. Como ah\u00ed se describe pueden encontrarse incompatibilidades dependiendo de los codecs de audio y \u00a0v\u00eddeo que se utilicen y del tipo de contenedor para los mismos. Hay que convivir con ese hecho y buscar la m\u00e1xima compatibilidad en el formato que se desee utilizar.<\/p>\n<p>Los formatos libres son\u00a0<strong>Ogg\/Theora <\/strong>y VP8\/WebM y en <a href=\"https:\/\/www.e-sort.net\/blog\/index.php\/2012\/02\/16\/comparativa-de-navegadores-formatos-de-video-en-html5\/\">este an\u00e1lisis<\/a>, aunque algo antiguo dado que es de 2012, son los que se recomiendan. En la escena anterior hemos usado Ogg para audio y MP4 para el v\u00eddeo. Ambos han funcionado en Chrome, Firefox y Explorer (en estos dos \u00faltimos lo que no funcion\u00f3 fue la parada del v\u00eddeo, s\u00ed la reproducci\u00f3n y la pausa).<\/p>\n<p>Conversores a diferentes formatos pueden encontrarse f\u00e1cilmente en la web. Por ejemplo aqu\u00ed hay <a href=\"https:\/\/www.worldwidewhat.net\/extras\/html5-audio-converter\/\">tiene enlazado uno<\/a>.<\/p>\n<p>Una alternativas que puede ayudar a salvar estas dificultades puede plantearse incluyendo los <a href=\"https:\/\/descartesjs.org\/documentacion\/?p=2297\">audios y v\u00eddeos en p\u00e1ginas que son abiertas a trav\u00e9s de espacios HTMLIframe<\/a>.<\/p>\n<hr \/>\n<h3 style=\"text-align: left;\" align=\"justify\">Comentario sobre la no visualizaci\u00f3n de los controles de audio y v\u00eddeo en el editor de configuraci\u00f3n.<\/h3>\n<p>Al agregar un control se observa una ventana en la que se puede seleccionar el tipo de control deseado. Es lo que se observa en la siguiente imagen:<\/p>\n<div id=\"attachment_2344\" style=\"width: 226px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/descartesjs.org\/documentacion\/wp-content\/uploads\/2014\/04\/controles0.jpg\"><img aria-describedby=\"caption-attachment-2344\" class=\"size-full wp-image-2344\" src=\"https:\/\/descartesjs.org\/documentacion\/wp-content\/uploads\/2014\/04\/controles0.jpg\" alt=\"Agregar un control\" width=\"216\" height=\"179\" \/><\/a><p id=\"caption-attachment-2344\" class=\"wp-caption-text\">Agregar un control<\/p><\/div>\n<p>Pero puede ser que en determinadas circunstancias contemple que las opciones de control tipo audio y v\u00eddeo no se muestran, tal y como se refleja a continuaci\u00f3n:<\/p>\n<div id=\"attachment_2345\" style=\"width: 226px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/descartesjs.org\/documentacion\/wp-content\/uploads\/2014\/04\/controles1.jpg\"><img aria-describedby=\"caption-attachment-2345\" class=\"size-full wp-image-2345\" src=\"https:\/\/descartesjs.org\/documentacion\/wp-content\/uploads\/2014\/04\/controles1.jpg\" alt=\"No se visualiza la selecci\u00f3n de controles de audio y v\u00eddeo\" width=\"216\" height=\"179\" \/><\/a><p id=\"caption-attachment-2345\" class=\"wp-caption-text\">No se visualiza la selecci\u00f3n de controles de audio y v\u00eddeo<\/p><\/div>\n<p>Esto es consecuencia de que tiene instalado el <a href=\"https:\/\/descartesjs.org\/documentacion\/?p=1395\">plugin de Descartes<\/a>, es decir, en su ordenador tiene instalado un archivo DescartesLib.jar al que est\u00e1 accediendo el gestor de escenas y que es incompatible con la edici\u00f3n de audio y v\u00eddeo actual. Para solventar esto basta que desinstale el plugin, borrando ese archivo. En windows suele acontecer que hay ubicaciones o enlaces a dicho archivo creados por el propio sistema operativo siendo necesario utilizar un limpiador espec\u00edfico que puede encontrar en la <a href=\"https:\/\/arquimedes.matem.unam.mx\/descartes.org.mx\/descartes\/web\/DescartesWeb2.0\/informacion_tecnica_Windows.html\">parte final de esta p\u00e1gina<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Los controles de audio y video permiten reproducir ficheros de sonido y de video incorporados en una escena. Este tipo de control tiene un panel de configuraci\u00f3n como el que se muestra en la imagen siguiente: Los elementos a definir son: id. Es el identificador del control. (region). Regi\u00f3n a la que se asigna el control num\u00e9rico. las opciones son: norte, sur, este, oeste, exterior e interior. La regi\u00f3n norte es una o varias filas horizontales en la parte superior de la escena entre los botones de cr\u00e9ditos y config. La regi\u00f3n sur es una o varias filas horizontales en<\/p>\n<a class=\"more-link\" rel=\"nofollow\" href=\"https:\/\/reddescartes.org\/documentacion\/audio-video\/\">[Leer m\u00e1s...]<\/a>","protected":false},"author":4,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[35],"tags":[81,47,82],"_links":{"self":[{"href":"https:\/\/reddescartes.org\/documentacion\/wp-json\/wp\/v2\/posts\/1322"}],"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\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/reddescartes.org\/documentacion\/wp-json\/wp\/v2\/comments?post=1322"}],"version-history":[{"count":13,"href":"https:\/\/reddescartes.org\/documentacion\/wp-json\/wp\/v2\/posts\/1322\/revisions"}],"predecessor-version":[{"id":3534,"href":"https:\/\/reddescartes.org\/documentacion\/wp-json\/wp\/v2\/posts\/1322\/revisions\/3534"}],"wp:attachment":[{"href":"https:\/\/reddescartes.org\/documentacion\/wp-json\/wp\/v2\/media?parent=1322"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/reddescartes.org\/documentacion\/wp-json\/wp\/v2\/categories?post=1322"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/reddescartes.org\/documentacion\/wp-json\/wp\/v2\/tags?post=1322"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}