{"id":828,"date":"2018-01-30T12:00:50","date_gmt":"2018-01-30T12:00:50","guid":{"rendered":"http:\/\/disseny-test.uoc.edu\/materials\/prod-digital\/?page_id=828"},"modified":"2018-01-30T12:00:50","modified_gmt":"2018-01-30T12:00:50","slug":"6-7-2-como-incrustar-video","status":"publish","type":"page","link":"http:\/\/disseny-test.uoc.edu\/materials\/prod-digital\/es\/6-7-2-como-incrustar-video\/","title":{"rendered":"6.7.2. C\u00f3mo incrustar v\u00eddeo"},"content":{"rendered":"

Incrustar<\/strong> (embed<\/em> en ingl\u00e9s) v\u00eddeo es un proceso mediante el cual incluimos un v\u00eddeo en otro soporte.<\/p>\n<\/div>\n

Cuando a\u00f1adimos un v\u00eddeo en una presentaci\u00f3n PowerPoint o Keynote, o en nuestro blog, estamos incrustando un v\u00eddeo.<\/p>\n

Es una tarea que no est\u00e1 nada sistematizada. En el mundo fuera de l\u00ednea, cada programa de creaci\u00f3n transmedia tiene normas diferentes sobre c\u00f3mo se incrusta un v\u00eddeo. Cada sistema de distribuci\u00f3n de v\u00eddeos tiene sus propios mecanismos, y despu\u00e9s cada plataforma de distribuci\u00f3n de contenidos tiene sus reglas espec\u00edficas sobre c\u00f3mo a\u00f1adir v\u00eddeo.<\/p>\n

Sin \u00e1nimo de ser exhaustivos, ahora comentaremos mecanismos sencillos para incluir v\u00eddeos en varios formatos digitales.<\/p>\n

Incrustar v\u00eddeos en una p\u00e1gina web<\/strong><\/h4>\n

De manera previa a la aparici\u00f3n de HTML 5, no hab\u00eda una manera sistem\u00e1tica de incluir v\u00eddeo en una p\u00e1gina web. Era necesario incluir alg\u00fan tipo de conector, que ten\u00eda que instalarse. Uno de los m\u00e1s extendidos y populares era Flash, que garantizaba v\u00eddeos que ocupaban poco espacio y estaba bastante extendido, y por lo tanto era la opci\u00f3n por defecto.<\/p>\n

HTML 5 ofrece una etiqueta espec\u00edfica para incluir v\u00eddeos, con el original nombre de \u00ab<video>\u00bb. Esta es su sintaxis:<\/p>\n

<video width=\"320\" height=\"240\">\r\n\r\n\u00a0 <source src=\"movie.mp4\" type=\"video\/mp4\">\r\n\r\n\u00a0 <source src=\"movie.ogg\" type=\"video\/ogg\">\r\n\r\nTu navegador no acepta el tag video de HTML 5\r\n\r\n<\/video><\/pre>\n
En width<\/em> pondremos la anchura con la que queremos que aparezca el v\u00eddeo en la p\u00e1gina; por defecto, hemos puesto 320. En height<\/em>, la altura. En src<\/em> pondremos el nombre del archivo de v\u00eddeo que queremos que aparezca; en este caso, lo hemos puesto en dos formatos posibles, MP4 y OGG, que son las opciones m\u00e1s accesibles para todo el mundo. La etiqueta est\u00e1 hecha suponiendo que los dos v\u00eddeos est\u00e1n en el mismo directorio que la p\u00e1gina web que los aloja. Si los guardo en un directorio para v\u00eddeos, la etiqueta tendr\u00eda que incluir el camino. Por ejemplo, si guardamos los v\u00eddeos en un subdirectorio llamado \u00abmisVideos\u00bb, el etiquetado deber\u00eda cambiar de este modo:<\/p>\n
<source src=\u201c\/misVideos\/movie.mp4\u201d type=\"video\/mp4\">\r\n\r\n\u00a0 \u00a0<source src=\u201c\/misVideos\/movie.ogg\u201d type=\u201cvideo\/ogg\"><\/pre>\n
Si el navegador que utilizamos no es capaz de entender la etiqueta \u00ab<video>\u00bb, aparecer\u00e1 la frase \u00abTu navegador no acepta el tag video de HTML 5\u00bb.<\/p>\n
Si queremos que el usuario pueda controlar el v\u00eddeo con botones de play<\/em>, volume<\/em>, etc., la etiqueta tendr\u00e1 que aparecer as\u00ed:<\/p>\n
<video width=\"320\" height=\"240\" controls><\/pre>\n
Controls<\/em> es la palabra clave responsable para la aparici\u00f3n de la interfaz. Por el contrario, si queremos que el v\u00eddeo se ejecute de manera autom\u00e1tica, utilizaremos la expresi\u00f3n autoplay<\/em>:<\/p>\n
<video width=\"320\" height=\"240\" autoplay><\/pre>\n
Lo mismo que dijimos en relaci\u00f3n con a\u00f1adir autom\u00e1ticamente audio a nuestras p\u00e1ginas web, se aplica tambi\u00e9n para el v\u00eddeo ejecutado de manera autom\u00e1tica. Esto puede resultar molesto, e incluso poner a nuestros usuarios en situaciones problem\u00e1ticas, como cuando navegan en una biblioteca o utilizan un m\u00f3vil para visitar una web en un espacio p\u00fablico, as\u00ed que lo mejor es utilizar la opci\u00f3n controls<\/em> y que sea el usuario quien decida ejecutarlo. Si hay un v\u00eddeo de fondo como introducci\u00f3n a la p\u00e1gina web, y forma parte intr\u00ednseca de la est\u00e9tica de esta, entonces lo mejor ser\u00e1 que se trate de un v\u00eddeo sin sonido.<\/p>\n
A\u00f1adir v\u00eddeos desde YouTube<\/h4>\n
<video><\/em> es la instrucci\u00f3n perfecta para incluir v\u00eddeos a los que tenemos acceso en el fichero. Sin embargo, tambi\u00e9n podemos incluir de manera sencilla v\u00eddeos de otras plataformas, como YouTube. La etiqueta usada es <iframe><\/em>:<\/p>\n
<iframe width=\"420\" height=\"345\" src=\"https:\/\/www.youtube.com\/embed\/friugilfswa\">\r\n\r\n<\/iframe><\/pre>\n
El c\u00f3digo que aparece despu\u00e9s de embed<\/em> no es la direcci\u00f3n web del v\u00eddeo, sino el c\u00f3digo identificador del v\u00eddeo, el video ID<\/em>. Para obtener el video ID<\/em>, solo tenemos que ir a la direcci\u00f3n web del v\u00eddeo. Por ejemplo:<\/p>\n
https:\/\/www.youtube.com\/watch?v=friugilfswa<\/pre>\n
El video ID <\/em>ser\u00e1 una serie de letras que aparecer\u00e1n al final de la URL, despu\u00e9s del signo =. De este modo, en nuestro caso, el video ID <\/em>ser\u00e1 frIUgilfsWA<\/em>.<\/p>\n
Si queremos que el v\u00eddeo se ejecute autom\u00e1ticamente, a\u00f1adiremos la palabra autoplay<\/em> despu\u00e9s del video ID <\/em>y antes de las comillas, con un signo ? delante:<\/p>\n
<iframe width=\"420\" height=\"345\" src=\"https:\/\/www.youtube.com\/embed\/friugilfswa?autoplay=1\u201d>\r\n\r\n<\/iframe><\/pre>\n
Para que aparezcan controles, tenemos controls<\/em>. Si controls=0<\/em>, no aparecen los controles. Si controls=1<\/em> s\u00ed que tenemos acceso a los mismos.<\/p>\n
<iframe width=\"420\" height=\"345\" src=\"https:\/\/www.youtube.com\/embed\/friugilfswa?autoplay=1&controls=1\u201d>\r\n\r\n<\/iframe><\/pre>\n","protected":false},"excerpt":{"rendered":"
Cuando a\u00f1adimos un v\u00eddeo en una presentaci\u00f3n PowerPoint o Keynote, o en nuestro blog, estamos incrustando un v\u00eddeo. Es una tarea que no est\u00e1 nada sistematizada. En el mundo fuera de l\u00ednea, cada programa de creaci\u00f3n transmedia tiene normas diferentes sobre c\u00f3mo se incrusta un v\u00eddeo. Cada sistema de distribuci\u00f3n de v\u00eddeos tiene sus propios […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false},"acf":[],"_links":{"self":[{"href":"http:\/\/disseny-test.uoc.edu\/materials\/prod-digital\/es\/wp-json\/wp\/v2\/pages\/828"}],"collection":[{"href":"http:\/\/disseny-test.uoc.edu\/materials\/prod-digital\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/disseny-test.uoc.edu\/materials\/prod-digital\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/disseny-test.uoc.edu\/materials\/prod-digital\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/disseny-test.uoc.edu\/materials\/prod-digital\/es\/wp-json\/wp\/v2\/comments?post=828"}],"version-history":[{"count":1,"href":"http:\/\/disseny-test.uoc.edu\/materials\/prod-digital\/es\/wp-json\/wp\/v2\/pages\/828\/revisions"}],"predecessor-version":[{"id":829,"href":"http:\/\/disseny-test.uoc.edu\/materials\/prod-digital\/es\/wp-json\/wp\/v2\/pages\/828\/revisions\/829"}],"wp:attachment":[{"href":"http:\/\/disseny-test.uoc.edu\/materials\/prod-digital\/es\/wp-json\/wp\/v2\/media?parent=828"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}