{"id":163,"date":"2014-10-28T09:00:14","date_gmt":"2014-10-28T08:00:14","guid":{"rendered":"https:\/\/blogs.ua.es\/idesweb\/?p=163"},"modified":"2014-10-19T18:39:55","modified_gmt":"2014-10-19T16:39:55","slug":"youtube-insercion-de-un-video","status":"publish","type":"post","link":"https:\/\/blogs.ua.es\/idesweb\/2014\/10\/28\/youtube-insercion-de-un-video\/","title":{"rendered":"YouTube: inserci\u00f3n de un v\u00eddeo"},"content":{"rendered":"

Un nuevo v\u00eddeo de\u00a0iDESWEB<\/a>\u00a0que se ofrecer\u00e1 a trav\u00e9s de la iniciativa\u00a0Act\u00edvate<\/a>\u00a0patrocinada por Google.<\/p>\n

[kml_flashembed movie=”http:\/\/www.youtube.com\/v\/pbVS2l3ghn4″ width=”560″ height=”315″ wmode=”transparent” \/]<\/p>\n

Transcripci\u00f3n:<\/p>\n

Hola, soy Sergio Luj\u00e1n Mora, profesor de inform\u00e1tica de la Universidad de Alicante, y en este v\u00eddeo que forma parte del curso \u201cIntroducci\u00f3n al desarrollo web\u201d, te voy a explicar c\u00f3mo puedes insertar un v\u00eddeo de YouTube en una p\u00e1gina web.<\/p>\n

\u00bfCrees que es dif\u00edcil lograr que un v\u00eddeo cualquiera de YouTube aparezca en una p\u00e1gina web?<\/p>\n

Como te voy a mostrar a continuaci\u00f3n, es muy sencillo, pero debes llevar un poco de cuidado.<\/p>\n

En este ejemplo, vamos a insertar el v\u00eddeo \u201cEvoluci\u00f3n de la Web: de la p\u00e1gina web a la aplicaci\u00f3n web\u201d en una p\u00e1gina web que yo he realizado.<\/p>\n

Una vez localizado el v\u00eddeo en YouTube tienes que buscar la opci\u00f3n \u201cCompartir\u201d. Hay tres m\u00e9todos para compartir un v\u00eddeo: la opci\u00f3n \u201cCompartir\u201d, la opci\u00f3n \u201cInsertar\u201d y la opci\u00f3n \u201cEnviar por correo\u201d.<\/p>\n

Vamos a emplear la opci\u00f3n \u201cInsertar\u201d, que nos permite insertar el v\u00eddeo en una p\u00e1gina web. Tenemos aqu\u00ed varias opciones. Podemos, por ejemplo, indicar que queremos insertar todo el v\u00eddeo o la lista de reproducci\u00f3n en la cual se encuentra el v\u00eddeo. En este caso, si queremos insertar la lista de reproducci\u00f3n podemos elegir a partir de qu\u00e9 v\u00eddeo, a partir del v\u00eddeo actual o a partir del primer v\u00eddeo de inicio de la lista de reproducci\u00f3n y tambi\u00e9n podemos elegir la forma de visualizar el v\u00eddeo cuando lo insertamos. Podemos cambiar el tama\u00f1o por defecto que aparece y podemos indicar si queremos que se muestren los controles del reproductor, reproducir, parar, avanzar y si queremos que se muestre el t\u00edtulo del v\u00eddeo y acciones adicionales del reproductor.<\/p>\n

Voy a dejar las opciones por defecto. Lo que voy a desactivar es \u201cCompartir con la lista de reproducci\u00f3n\u201d porque solamente quiero insertar el v\u00eddeo actual. F\u00edjate que cuando activo o desactivo la opci\u00f3n se modifica este c\u00f3digo de aqu\u00ed. Este c\u00f3digo de aqu\u00ed es el c\u00f3digo que yo voy a copiar para insertar en mi p\u00e1gina web. Lo dejo con la opci\u00f3n de no compartir la lista de reproducci\u00f3n, copio el c\u00f3digo, muy importante, debo de copiar todo el c\u00f3digo, si me dejo una parte, seguramente fallar\u00e1. Lo copio y me lo llevo a mi p\u00e1gina web.<\/p>\n

Aqu\u00ed tengo una p\u00e1gina web sencilla en la que pego mi c\u00f3digo fuente.<\/p>\n

Lo guardo, le doy a ejecutar y, aqu\u00ed debajo del encabezado <h1>, debajo del encabezado <h1>, deber\u00eda de salir el v\u00eddeo. Sin embargo no va a salir. Puedo estar aqu\u00ed esperando y esperando, y al final el v\u00eddeo no saldr\u00e1, seguramente saldr\u00e1 un mensaje de error. F\u00edjate que est\u00e1 el icono de cargando la p\u00e1gina.<\/p>\n

\u00bfCu\u00e1l es el problema?<\/p>\n

Bueno, el problema est\u00e1 aqu\u00ed en el atributo source, en la URL de carga del v\u00eddeo. El c\u00f3digo de YouTube est\u00e1 preparado para insertar un v\u00eddeo en una p\u00e1gina \u201cviva\u201d, una p\u00e1gina real que est\u00e1 publicada en Internet.<\/p>\n

En este caso mi p\u00e1gina no est\u00e1 publicada en Internet, mi p\u00e1gina la estoy ejecutando en local. F\u00edjate que aparece el protocolo, el esquema file. Este c\u00f3digo est\u00e1 as\u00ed porque est\u00e1 preparado tanto para conexiones http como conexiones https. El navegador incluir\u00e1 aqu\u00ed delante http o https seg\u00fan el tipo de p\u00e1gina en la que estemos.<\/p>\n

Esto s\u00f3lo funciona cuando la p\u00e1gina se ha transmitido a trav\u00e9s de http, es decir, cuando la p\u00e1gina est\u00e1 realmente en Internet. Como en este caso, como he dicho, est\u00e1 en local, el prefijo http, el esquema lo tengo que colocar yo a mano. As\u00ed que le pongo \u201chttp:\u201d, lo grabo, ejecuto y ahora s\u00ed que sale el v\u00eddeo, el v\u00eddeo que funciona sin problemas. Yo puedo avanzar, le puedo dar a pausa o incluso podr\u00eda ponerlo a pantalla completa, como puedes observar.<\/p>\n

As\u00ed que, repito, simplemente hay que copiar el c\u00f3digo de inserci\u00f3n, se copia en nuestra p\u00e1gina web y a funcionar, salvo este peque\u00f1o detalle que hay que tener en cuenta cuando estamos ejecutando la p\u00e1gina en local. Si la p\u00e1gina est\u00e1 realmente publicada en Internet, con esto es suficiente.<\/p>\n

Ya para terminar, me gustar\u00eda recordarte algunos de los sitios web en los que puedes encontrar m\u00e1s informaci\u00f3n sobre m\u00ed y sobre mi trabajo, y dos formas de contactar conmigo, a trav\u00e9s de mi correo electr\u00f3nico sergio.lujan@ua.es y a trav\u00e9s de mi cuenta en Twitter @sergiolujanmora.<\/p>\n

Recuerda que este v\u00eddeo forma parte del curso \u201cIntroducci\u00f3n al desarrollo web\u201d que est\u00e1 disponible en la direcci\u00f3n idesweb.es.<\/p>\n

Muchas gracias por tu atenci\u00f3n.<\/p>\n","protected":false},"excerpt":{"rendered":"

Un nuevo v\u00eddeo de\u00a0iDESWEB\u00a0que se ofrecer\u00e1 a trav\u00e9s de la iniciativa\u00a0Act\u00edvate\u00a0patrocinada por Google. [kml_flashembed movie=”http:\/\/www.youtube.com\/v\/pbVS2l3ghn4″ width=”560″ height=”315″ wmode=”transparent” \/] Transcripci\u00f3n: Hola, soy Sergio Luj\u00e1n Mora, profesor de inform\u00e1tica de la Universidad de Alicante, y en este v\u00eddeo que forma parte del curso \u201cIntroducci\u00f3n al desarrollo web\u201d, te voy a explicar c\u00f3mo puedes insertar un v\u00eddeo … <\/p>\n

Continue reading “YouTube: inserci\u00f3n de un v\u00eddeo”<\/span><\/a><\/p>\n","protected":false},"author":40,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[676],"tags":[],"class_list":["post-163","post","type-post","status-publish","format-standard","hentry","category-sin-categoria"],"_links":{"self":[{"href":"https:\/\/blogs.ua.es\/idesweb\/wp-json\/wp\/v2\/posts\/163","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.ua.es\/idesweb\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.ua.es\/idesweb\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.ua.es\/idesweb\/wp-json\/wp\/v2\/users\/40"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.ua.es\/idesweb\/wp-json\/wp\/v2\/comments?post=163"}],"version-history":[{"count":1,"href":"https:\/\/blogs.ua.es\/idesweb\/wp-json\/wp\/v2\/posts\/163\/revisions"}],"predecessor-version":[{"id":164,"href":"https:\/\/blogs.ua.es\/idesweb\/wp-json\/wp\/v2\/posts\/163\/revisions\/164"}],"wp:attachment":[{"href":"https:\/\/blogs.ua.es\/idesweb\/wp-json\/wp\/v2\/media?parent=163"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.ua.es\/idesweb\/wp-json\/wp\/v2\/categories?post=163"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.ua.es\/idesweb\/wp-json\/wp\/v2\/tags?post=163"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}