Si usted tiene un blog o una página web personal, es seguro que de vez en cuando enfrenta a la necesidad de colocar vídeo en su página para que sus amigos puedan mirarlo. Sin duda, usted puede subir este vídeo a través de algún servicio - YouTube o algo por el estilo. Nosotros, sin embargo, tenemos una mejor solución para usted: el programa AVS Video to Flash convertirá su vídeo en formato apto para colgar en el Internet y aún creará el marcado de la página en la que se colocará el vídeo. Límítese a seguir los pasos de abajo para aprender a crear vídeo y editar el marcado de la página web resultante.
[Volver al inicio]
Después de instalar el AVS Video to Flash usted puede ejecutarlo y convertir ficheros de vídeo para su página web. Por favor lea la guía "¿Cómo crear vídeo para una página web?" para aprender a hacerlo.
El tiempo de la conversión puede variar en función del tamaño del fichero de entrada, de los parámetros de la conversión y la configuración de su ordenador. Una vez terminada la conversión, en la siguiente pantalla le serán ofrecidas varias acciones que pueda realizar con el vídeo y la página web creados:
Por favor seleccione la opción Resultado para poder editar la página resultante.
[Volver al inicio]
a. Los ficheros resultantes y el marcado de la página inicial
Una vez pulsado el botón Resultado, se le presentará la siguiente pantalla:
En el directorio se encuentran los siguientes archivos:
avs4you_player.swf - el nombre del reproductor creado por el programa para reproducir el vídeo en la página;
Glass.swf - el nombre del skin del reproductor seleccionado (puede ser también Mech.swf, Plastic.swf, Platinum.swf, Wood.swf y Youtube.swf según el skin seleccionado, - consulte Paso 3 de la guía ¿Cómo crear vídeo para una página web?);
index.htm - la página HTML la que usted puede modificar para que ésta se adapte al estilo de su página personal o blog;
MOV006_NEW.flv - el nombre del vídeo convertido (coincide con el nombre del fichero de entrada, si le ha dejado el nombre predeterminado, o bien será el nombre seleccionado, - consulte Paso 5 de la guía ¿Cómo crear vídeo para una página web?);
swfobject.js - el fichero con el script esencial para el funcionamiento adecuado de la página.
Por favor abra el archivo index.htm en su editor de páginas web preferido.
Nota: si el editor de páginas web que utilice puede funcionar en 2 modos -
'Diseño' y
'Fuente' (o algo por el estilo), usted tiene que escoger el modo
fuente para poder ver y editar el marcado de la página web.
El código inicial de la página es como se muestra a continuación:
<html>
<head>
<title>AVS FLV Player</title>
<META http-equiv="content-type" content="text/html; charset=utf-8">
<script type="text/javascript" src="swfobject.js"></script>
<style type="text/css">
body { background-color: #FFFFFF; font: .8em/1.3em verdana,arial,
helvetica,sans-serif }
#flashcontent { border: solid 0px #000; width: 400px; height: 300px;
float: left }
</style>
</head>
<body>
<div id="flashcontent">
<strong>You need to upgrade your Flash Player.</strong>
</div>
<script type="text/javascript">
var so = new SWFObject('avs4you_player.swf', 'player', '400', '300',
'7', "#000000");
so.addParam("allowScriptAccess","always");
so.addParam("allowFullScreen","true");
so.addParam("wmode", "window");
so.addParam("scale", "noscale");
so.addVariable("file", "MOV006_NEW.flv");
so.addVariable("height", "400");
so.addVariable("width", "300");
so.addVariable("theme", "Youtube.swf");
so.addVariable("repeat", "1");
so.addVariable("autostart", "0");
so.addVariable("image", "");
so.addVariable("volume", "50");
so.addVariable("scaleonresize", "none");
so.addVariable("top_caption", "");
so.addVariable("bottom_caption", "");
so.addVariable("v", getQueryParamValue("v"));
so.write("flashcontent");
</script>
</body>
</html>
Si deja la página tal y como está, su aspecto será así (haga clic para visualizar la página).
b. Como añadir texto
Sin embargo, usted puede añadir algún texto o imágenes a la página, insertándolos depués de la etiqueta de cierre </div>:
<div id="flashcontent">
<strong>You need to upgrade your Flash Player.</strong>
</div>
<p>If you have a blog or a home page you might for sure need sometimes
to put a video of yours onto your web-site or your web-page for your friends
to see it. Of course, you can upload a video to some service - YouTube or
something alike - but we have a better solution for you: AVS Video to Flash
program will convert your video for web and even create a markup for the
web-page with the video. Simply follow the steps below.</p>
De esta maneta puede añadir cualquier texto insertándolo entre las etiquetas <p>...</p>.
Pulse aquí para ver el ejemplo de la página
c. Como cambiar la posición del reproductor
Como puede ver, el texto ha sido colocado a la derecha del reproductor. Ha pasado así, porque la propiedad 'float' está indicada en la sección 'style' de la página web, la que hace que el vídeo se coloque a la izquierda del texto:
<style type="text/css">
body { background-color: #FFFFFF;
font: .8em/1.3em verdana,arial,helvetica,sans-serif }
#flashcontent { border: solid 0px #000;
width: 400px;
height: 300px;
float: left }
</style>
Usted puede cambiarlo a 'float: right' si desea que el vídeo se coloque a la derecha del texto:
<style type="text/css">
body { background-color: #FFFFFF;
font: .8em/1.3em verdana,arial,helvetica,sans-serif }
#flashcontent { border: solid 0px #000;
width: 400px;
height: 300px;
float: right }
</style>
Pulse aquí para ver el ejemplo de la página
si desea que el vídeo se coloque en el centro de la página y desea un texto por encima o por debajo del vídeo, debe realizar las siguientes modificaciones:
Cambie la propiedad de 'float' en la sección #flashcontent a 'float: none;'.
Añade la propiedad de 'margin' a la sección #flashcontent - 'margin: auto;'.
Añade la propiedad de 'text-align' al elemento body - 'text-align: center;'.
Añade la propiedad de 'text-align' al elemento p - 'text-align: justify;'.
Colocque un texto entre las etiquetas <p>...</p> antes del <div>...</div> - este texto se colocará por encima del vídeo.
Cambie el título de la página - se encuentra entre las etiquetas <title>...</title>.
Entonces, el marcado final de la página podría ser así:
<html>
<head>
<title>My Page with the Video Converted with
AVS Video to Flash</title>
<META http-equiv="content-type" content="text/html; charset=utf-8">
<script type="text/javascript" src="swfobject.js"></script>
<style type="text/css">
body { background-color: #FFFFFF; font: .8em/1.3em verdana,arial,helvetica,
sans-serif; text-align: center; }
#flashcontent { border: solid 0px #000; width: 400px; height: 300px;
float: none; margin: auto; }
p { font-size: 1em; text-align: justify; }
</style>
</head>
<body>
<p>If you have a blog or a home page you might for sure need sometimes
to put a video of yours onto your web-site or your web-page for your friends
to see it. Of course, you can upload a video to some service - YouTube or
something alike - but we have a better solution for you: AVS Video to Flash
program will convert your video for web and even create a markup for the
web-page with the video. Simply follow the steps below.</p>
<div id="flashcontent">
<strong>You need to upgrade your Flash Player.</strong>
</div>
<p>The conversion process will take some time depending on the source
file size, conversion parameters and your computer configuration. When the
conversion is over, the following window will offer possible actions for
your created video and the web-page.</p>
<p>Note: if your web editor has two modes - 'Design' mode and 'Source'
editing mode (or something like that), you need to choose the source editing
mode to be able to see and change the page markup.</p>
<script type="text/javascript">
var so = new SWFObject('avs4you_player.swf', 'player', '400', '300',
'7', "#ffffff");
so.addParam("allowScriptAccess","always");
so.addParam("allowFullScreen","true");
so.addParam("wmode", "window");
so.addParam("scale", "noscale");
so.addVariable("file", "MOV006_NEW.flv");
so.addVariable("width", "400");
so.addVariable("height", "300");
so.addVariable("theme", "Youtube.swf");
so.addVariable("repeat", "1");
so.addVariable("autostart", "0");
so.addVariable("image", "");
so.addVariable("volume", "50");
so.addVariable("scaleonresize", "none");
so.addVariable("top_caption", " ");
so.addVariable("bottom_caption", " ");
so.addVariable("v", getQueryParamValue("v"));
so.write("flashcontent");
</script>
</body>
</html>
Y pulse aquí para ver el ejemplo de la página.
Ahora usted puede subir la página creada así como TODOS los ficheros enumerados en el Paso 3 de la presente guía, al servidor a través del cliente FTP.
¡No olvide enviar el link a la página con el vídeo creado a todos sus amigos!
[Volver al inicio]
Por favor note que los programas de AVS4YOU no le autorizan copiar cualquier material protegido por el derecho de autor y deben ser usados para creación de una copia de seguridad sólo para el uso personal. Usted puede usar este software copiando cualquier material si posee los derechos de autor o si ha obtenido una autorización del autor para copiarlo.