Generar el código para incrustar

  • Regresa a la carpeta donde se encuentran los activos descargados y haz clic derecho sobre el archivo index.html para seleccionar Abrir con … > Bloc de notas.
Abre con el bloc de notas
  • El código que integra el reproductor y el vídeo en la página es:
<embed src="jwplayer.swf" width="384" height="312" allowfullscreen="true" flashvars="file=video.flv&image=captura.jpg"></embed>

En la variable file se indica la referencia a la ubicación del archivo de vídeo flv que se reproduce. Puedes modificar este valor para reproducir un vídeo con otro nombre distinto. En las variables height y width se indican la altura y anchura en píxeles con que se visualizará el reproductor. El vídeo tiene unas dimensiones originales de 384x288 píxeles. Puede comprobarlo utilizando MediaInfo tal y como se explicaba en un apartado anterior. La botonera ocupa 24 píxeles de altura. Sumados a los 288 del vídeo hacen un total de 312 píxeles para el total del reproductor.

  • A continuación modificamos este código para que el reproductor (flvplayer.swf), la imagen (captura.jpg) y el video (video.flv) sean los que has subido a tu espacio en Google Sites. Para ello regresa a la página de Google Sites y haz clic en el enlace Ver que acompaña a la imagen captura.jpg.
Ver captura
  • Se abre una pestaña del navegador web mostrando la imagen en solitario. Haz clic derecho en la barra de direcciones del navegador que muestra la imagen y elige Seleccionar todo. Luego vuelve a hacer clic derecho y elige Copiar. Esta acción copia la URL absoluta de la imagen almacenada en el servidor de Google Sites.
Copiar la URL absoluta
  • Abre un nuevo Bloc de Notas y selecciona Editar > Pegar para pegar la URL de acceso a la imagen captura.jpg alojada en tu cuenta de Google Sites.
Pegar la URL
  • En la URL elimina todo el código basura que no necesitamos a partir del signo de interrogación que acompaña al nombre del archivo *.JPG. (marcado en amarillo en la imagen).
  • Consigue la dirección del resto de archivos subidos (FLV y SWF) copiando y pegando la URL de la imagen JPG pero sustituyendo simplemente el nombre del archivo.
Consigue la dirección del resto de archivos
  • De esta forma se consiguen las URLs de los 3 archivos que utilizaremos en nuestro blog:
    • JPG: "https://sites.googlegroups.com/site/fernandoposada/video/captura.jpg"
    • SWF: "https://sites.googlegroups.com/site/fernandoposada/video/jwplayer.swf"
    • FLV: "https://sites.googlegroups.com/site/fernandoposada/video/video.flv":
  • Regresa al Bloc de notas donde se encuentra el código embed dentro de la página index.html. Utiliza la técnica de seleccionar y clic derecho+Copiar/Pegar para modificar los nombre de los archivos JPG, SWF y FLV por las URL de los mismos en Google Sites.
Modifica las URL
  • El código será de la forma:
<embed src="https://5224792582840790864-a-1802744773732722657-s- sites.googlegroups.com/site/fernandoposada/video/jwplayer.swf" width="384" height="312" allowfullscreen="true" flashvars="file=https://5224792582840790864-a-> 1802744773732722657- s-sites.googlegroups.com/site/fernandoposada/video/video.flv&image=https://522479 2582840790864-a-1802744773732722657-s-sites.googlegroups.com/site/fernandoposada/video/captura.jpg"> </embed>
  • Selecciona este código < embed>...< /embed> y elige Editar > Copiar.
  • Como hemos comentado anteriormente Wordpress no admite copiar y pegar una etiqueta embed porque la limpia al guardar la entrada. Por este motivo es necesario transformarla en una etiqueta gigya. Para ello en el código anterior elimina los fragmentos y la etiqueta final y sustitúyelas por una etiqueta [gigya inicial y el corchete final ]. De esta forma resultará:
[gigya src="https://5224792582840790864-a-1802744773732722657-s- sites.googlegroups.com/site/fernandoposada/video/jwplayer.swf" width="384" height="312" allowfullscreen="true"lashvars="file=https://5224792582840790864- a-802744773732722657-s-sites.googlegroups.com/site/fernandoposada/video/ video.flv&image=https://5224792582840790864-a-1802744773732722657-s- sites.googlegroups.com/site/fernandoposada/video/captura.jpg"]
  • Selecciona este código gigya y elige Editar > Copiar.