{"id":436,"date":"2018-01-19T21:10:19","date_gmt":"2018-01-19T21:10:19","guid":{"rendered":"http:\/\/disseny-test.uoc.edu\/materials\/prod-digital\/?page_id=436"},"modified":"2018-01-30T14:06:58","modified_gmt":"2018-01-30T14:06:58","slug":"6-7-2-com-incrustar-video","status":"publish","type":"page","link":"http:\/\/disseny-test.uoc.edu\/materials\/prod-digital\/6-7-2-com-incrustar-video\/","title":{"rendered":"6.7.2. Com incrustar v\u00eddeo"},"content":{"rendered":"

Incrustar<\/strong> (embed<\/em> en angl\u00e8s) v\u00eddeo \u00e9s un proc\u00e9s amb el qual incloem un v\u00eddeo en un altre suport.<\/p>\n<\/div>\n

Quan afegim un v\u00eddeo en una presentaci\u00f3 PowerPoint o Keynote, o al nostre blog, estem incrustant un v\u00eddeo.<\/p>\n

\u00c9s una tasca que no est\u00e0 gens sistematitzada. En el m\u00f3n fora de l\u00ednia, cada programa de creaci\u00f3 transm\u00e8dia t\u00e9 normes diferents sobre com s\u2019incrusta un v\u00eddeo. Cada sistema de distribuci\u00f3 de v\u00eddeos t\u00e9 els seus propis mecanismes i despr\u00e9s cada plataforma de distribuci\u00f3 de continguts t\u00e9 les seves regles espec\u00edfiques sobre com afegir v\u00eddeo.<\/p>\n

Sense \u00e0nim de ser exhaustius, ara comentarem mecanismes senzills per a incloure v\u00eddeos en diversos formats digitals.<\/p>\n

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

Pr\u00e8viament a l\u2019aparici\u00f3 d\u2019HTML 5 no hi havia una manera sistem\u00e0tica d\u2019incloure v\u00eddeo en una p\u00e0gina web. Era necessari incloure-hi algun tipus de connector, que havia d\u2019instal\u00b7lar-se. Un dels m\u00e9s estesos i populars era Flash, que garantia v\u00eddeos que ocupaven poc espai i estava bastant est\u00e8s, i per tant era l\u2019opci\u00f3 per defecte.<\/p>\n

HTML 5 ofereix una etiqueta espec\u00edfica per a incloure v\u00eddeos, amb l\u2019original nom de \u00ab<video>\u00bb. Aquesta n\u2019\u00e9s la sintaxi:<\/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
A width<\/em> posarem l\u2019ampl\u00e0ria amb qu\u00e8 volem que aparegui el v\u00eddeo en la p\u00e0gina; per defecte, hem posat 320. A height<\/em>, l\u2019altura. A src<\/em> posarem el nom de l\u2019arxiu de v\u00eddeo que volem que aparegui; en aquest cas l\u2019hem posat en dos formats possibles, mp4 i ogg, que s\u00f3n les opcions m\u00e9s accessibles per a tothom. L\u2019etiqueta est\u00e0 feta suposant que els dos v\u00eddeos estan en el mateix directori que la p\u00e0gina web que els allotja. Si els guardo en un directori per a v\u00eddeos, l\u2019etiqueta hauria d\u2019incloure el cam\u00ed. Per exemple, si guardem els v\u00eddeos en un subdirectori anomenat \u00abmisVideos\u00bb l\u2019etiquetatge hauria de canviar aix\u00ed:<\/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 utilitzem no \u00e9s capa\u00e7 d\u2019entendre l\u2019etiqueta \u00ab<video>\u00bb apareixer\u00e0 la frase \u00abTu navegador no acepta el tag video de HTML 5\u00bb.<\/p>\n
Si volem que l\u2019usuari pugui controlar el v\u00eddeo amb botons de play<\/em>, volume<\/em>, etc., l\u2019etiqueta haur\u00e0 d\u2019apar\u00e8ixer aix\u00ed:<\/p>\n
<video width=\"320\" height=\"240\" controls><\/pre>\n
Controls<\/em> \u00e9s la paraula clau responsable per a l\u2019aparici\u00f3 de la interf\u00edcie. Per contra, si volem que el v\u00eddeo s\u2019executi autom\u00e0ticament utilitzarem l\u2019expressi\u00f3 autoplay<\/em>:<\/p>\n
<video width=\"320\" height=\"240\" autoplay><\/pre>\n
El mateix que vam dir en relaci\u00f3 amb afegir autom\u00e0ticament \u00e0udio a les nostres p\u00e0gines web, s\u2019aplica tamb\u00e9 per al v\u00eddeo executat autom\u00e0ticament. Aix\u00f2 pot resultar molest, i fins i tot posar els nostres usuaris en situacions problem\u00e0tiques, com quan naveguen en una biblioteca o utilitzen un m\u00f2bil per a visitar una web en un espai p\u00fablic, aix\u00ed que el millor \u00e9s utilitzar l\u2019opci\u00f3 controls<\/em> i que sigui l\u2019usuari el qui decideixi executar-lo. Si hi ha un v\u00eddeo de fons com a introducci\u00f3 a la p\u00e0gina web, i forma part intr\u00ednseca de l\u2019est\u00e8tica d\u2019aquesta, llavors el millor ser\u00e0 que sigui un v\u00eddeo sense so.<\/p>\n
Afegir v\u00eddeos des de YouTube<\/strong><\/h4>\n
<video><\/em> \u00e9s la instrucci\u00f3 perfecta per a incloure v\u00eddeos dels quals tenim acc\u00e9s en el fitxer. Per\u00f2 tamb\u00e9 podem incloure de manera senzilla v\u00eddeos d\u2019altres plataformes, com YouTube. L\u2019etiqueta usada \u00e9s <iframe><\/em>:<\/p>\n
<iframe width=\"420\" height=\"345\" \r\nsrc=\"https:\/\/www.youtube.com\/embed\/friugilfswa\">\r\n\r\n<\/iframe><\/pre>\n
El codi que apareix despr\u00e9s d\u2019embed<\/em> no \u00e9s l\u2019adre\u00e7a web del v\u00eddeo sin\u00f3 el codi identificador del v\u00eddeo, el video ID<\/em>. Per a obtenir el video ID<\/em>, solament hem d\u2019anar a l\u2019adre\u00e7a web del v\u00eddeo, per exemple:<\/p>\n
https:\/\/www.youtube.com\/watch?v=friugilfswa<\/pre>\n
El video ID <\/em>ser\u00e0 una s\u00e8rie de lletres que apareixeran al final de la URL, despr\u00e9s del signe =. Aix\u00ed, en el nostre cas el video ID <\/em>ser\u00e0 frIUgilfsWA<\/em>.<\/p>\n
Si volem que el v\u00eddeo s\u2019executi autom\u00e0ticament, afegirem la paraula autoplay<\/em> despr\u00e9s del video ID <\/em>i abans de les cometes, amb un signe ? davant:<\/p>\n
<iframe width=\"420\" height=\"345\" \r\nsrc=\"https:\/\/www.youtube.com\/embed\/friugilfswa?autoplay=1\u201d>\r\n\r\n<\/iframe><\/pre>\n
Perqu\u00e8 apareguin controls, tenim controls<\/em>. Si controls=0<\/em> no apareixen els controls. Si controls=1<\/em> s\u00ed que hi tenim acc\u00e9s.<\/p>\n
<iframe width=\"420\" height=\"345\" \r\nsrc=\"https:\/\/www.youtube.com\/embed\/friugilfswa?autoplay=1&controls=1\u201d>\r\n\r\n<\/iframe><\/pre>\n","protected":false},"excerpt":{"rendered":"
Quan afegim un v\u00eddeo en una presentaci\u00f3 PowerPoint o Keynote, o al nostre blog, estem incrustant un v\u00eddeo. \u00c9s una tasca que no est\u00e0 gens sistematitzada. En el m\u00f3n fora de l\u00ednia, cada programa de creaci\u00f3 transm\u00e8dia t\u00e9 normes diferents sobre com s\u2019incrusta un v\u00eddeo. Cada sistema de distribuci\u00f3 de v\u00eddeos t\u00e9 els seus propis […]<\/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\/wp-json\/wp\/v2\/pages\/436"}],"collection":[{"href":"http:\/\/disseny-test.uoc.edu\/materials\/prod-digital\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/disseny-test.uoc.edu\/materials\/prod-digital\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/disseny-test.uoc.edu\/materials\/prod-digital\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/disseny-test.uoc.edu\/materials\/prod-digital\/wp-json\/wp\/v2\/comments?post=436"}],"version-history":[{"count":2,"href":"http:\/\/disseny-test.uoc.edu\/materials\/prod-digital\/wp-json\/wp\/v2\/pages\/436\/revisions"}],"predecessor-version":[{"id":914,"href":"http:\/\/disseny-test.uoc.edu\/materials\/prod-digital\/wp-json\/wp\/v2\/pages\/436\/revisions\/914"}],"wp:attachment":[{"href":"http:\/\/disseny-test.uoc.edu\/materials\/prod-digital\/wp-json\/wp\/v2\/media?parent=436"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}