Vídeo con imaxe en portada

Para poder evitar a portada en cor negro que presenta o vídeo por defecto podemos empregar a seguinte estratexia:

Primeiramente debemos adxuntar a imaxe que desexamos empregar como portada do noso vídeo ao contido, por exemplo “portada_video.png”. Pero nesta ocasión non é necesario que apareza listada, senón que abonda con que estea solo subida como adxunto. Unha vez subida copiaremos o seu enderezo (URL) que aparece xusto debaixo.

Exemplo: http://www.edu.xunta.gal/centros/curso3/system/files/portada_video.png

Como segunda acción debemos observar o código fonte HTML da páxina onde temos o vídeo publicado (botón dereito sobre unha zona limpa da páxina e seleccionar a opción “Ver código fonte da páxina”). Dentro de todo ese código fonte que aparece trataremos de localizar o relativo ao vídeo publicado que será semellante ao seguinte:

<div class="swftools-wrapper wijering-mediaplayer swftools-upload"><div class="swftools"><object width="400" height="320" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="http://www.edu.xunta.gal/centros/curso3/modules/swftools/shared/flash_media_player/mediaplayer.swf" />
<param name="wmode" value="opaque" />
<param name="bgcolor" value="#FFFFFF" />
<param name="scale" value="showall" />
<param name="quality" value="autohigh" />
<param name="align" value="l" />
<param name="FlashVars" value="width=400&height=320&file=http%3A/%252Fwww.edu.xunta.gal/centros/curso3/%253Fq%253Dsystem/files/%252Fsrv/hosting/home/curso3/drupal/files/playlists/8cb76161b285f29e542c49d47bfe8a12.xml" />
<embed width="400" height="320" swliveconnect="default" src="http://www.edu.xunta.gal/centros/curso3/modules/swftools/shared/flash_media_player/mediaplayer.swf" wmode="opaque" bgcolor="#FFFFFF" scale="showall" quality="autohigh" loop="false" menu="false" play="true" name="" base="http://www.edu.xunta.gal/centros/curso3/?q=system/files/" salign="tl" FlashVars="width=400&height=320&file=http%3A/%252Fwww.edu.xunta.gal/centros/curso3/%253Fq%253Dsystem/files/%252Fsrv/hosting/home/curso3/drupal/files/playlists/8cb76161b285f29e542c49d47bfe8a12.xml" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object></div>

No código anterior aparecen destacados os dous lugares a cadea onde se fai a chamada ao vídeo que xuntamos “volcanes.flv”. Para que apareza a imaxe desexada en portada do vídeo cambiaremos ese código destacado por este outro do ficheiro de vídeo e engadindo o enderezo da imaxe desexada:

<div class="swftools-wrapper wijering-mediaplayer swftools-upload"><div class="swftools"><object width="400" height="320" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="http://www.edu.xunta.gal/centros/curso3/modules/swftools/shared/flash_media_player/mediaplayer.swf" />
<param name="wmode" value="opaque" />
<param name="bgcolor" value="#FFFFFF" />
<param name="scale" value="showall" />
<param name="quality" value="autohigh" />
<param name="align" value="l" />
<param name="FlashVars" value="width=400&height=320&file=http://www.edu.xunta.gal/centros/curso3/system/files/volcanes.flv&image=http://www.edu.xunta.gal/centros/curso3/system/files/portada_video.png" />
<embed width="400" height="320" swliveconnect="default" src="http://www.edu.xunta.gal/centros/curso3/modules/swftools/shared/flash_media_player/mediaplayer.swf" wmode="opaque" bgcolor="#FFFFFF" scale="showall" quality="autohigh" loop="false" menu="false" play="true" name="" base="http://www.edu.xunta.gal/centros/curso3/?q=system/files/" salign="tl" FlashVars="width=400&height=320&file=http://www.edu.xunta.gal/centros/curso3/system/files/volcanes.flv&image=http://www.edu.xunta.gal/centros/curso3/system/files/portada_video.png" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object></div>

Finalmente pegaremos este código no corpo dun contido novo onde desexamos que apareza o vídeo publicado e coa imaxe en portada.

Ollo! teremos así un contido onde están adxuntos o vídeo FLV e a imaxe de portada de dito vídeo pero que non publicaremos en nigures; o que publicaremos é un novo contido co código anterior embebido que poderemos situar en calquera lugar do noso contido, mentres que os vídeos adxuntos sempre aparecen ao final da páxina. (Ver exemplo: http://www.edu.xunta.gal/centros/curso3/node/16)

Vídeo con imaxe en portada

Agradecementos a Marta Goy López pola súa contribución no curso de Webs dinámicas de Platega edición 2012.
Última modificación: Mércores, 23 de Decembro de 2015, 11:06