Aprenda a incrustar vídeos en páginas web y a insertar archivos FLV en Dreamweaver.

Incrustación de vídeos en páginas web (HTML5)

HTML5 admite etiquetas de vídeo y audio que permiten al usuario reproducir archivos de vídeo y de audio en un navegador sin utilizar complementos ni reproductores externos. Dreamweaver admite sugerencias para el código para la adición de etiquetas de vídeo y audio.

La Vista en vivo muestra el vídeo para ofrecer una vista previa del vídeo que está incrustando en la página web.

Nota:

Aunque puede incrustar cualquier vídeo en la página web, la Vista en vivo no siempre muestra todos los vídeos. La compatibilidad con las etiquetas de audio y de vídeo se consigue en Dreamweaver mediante el complemento QuickTime de Apple. En Windows, si no está instalado el complemento QuickTime de Apple, la página web no mostrará el contenido multimedia.

Para saber cómo insertar vídeo HTML5, consulte insertar vídeos HTML5 en Dreamweaver.

Inserción de archivos FLV

Inserción de archivos FLV

Puede añadir fácilmente vídeo FLV a las páginas web sin necesidad de utilizar la herramienta de creación de Flash. Para poder empezar, debe disponer de un archivo FLV codificado.

Dreamweaver inserta un componente SWF que muestra el archivo FLV; cuando se visualiza en un navegador, este componente muestra el archivo FLV seleccionado, así como un conjunto de controles de reproducción.

El archivo FLV seleccionado y un conjunto de controles de reproducción
El archivo FLV seleccionado y un conjunto de controles de reproducción

Dreamweaver ofrece las opciones siguientes para mostrar vídeo FLV a los visitantes de su sitio:

Descarga progresiva de vídeo

Descarga el archivo FLV en el disco duro del visitante del sitio y lo reproduce. Sin embargo, a diferencia de los métodos tradicionales de entrega de vídeo de tipo “descarga y reproducción”, la descarga progresiva permite iniciar la reproducción del archivo de vídeo antes de que haya finalizado la descarga.

Flujo de vídeo

Transfiere el contenido de vídeo y lo reproduce en una página web transcurrido un breve periodo de búfer que garantice una reproducción fluida. Para activar el flujo de vídeo en las páginas web, debe tener acceso a Adobe® Flash® Media Server.

Debe contar con un archivo FLV codificado para poder utilizarlo en Dreamweaver. Se pueden insertar archivos de vídeo creados con dos tipos de códecs (tecnologías de compresión y descompresión): Sorenson Squeeze y On2.

Al igual que sucede con los archivos SWF, al insertar un archivo FLV, Dreamweaver inserta código que detecta si el usuario dispone de la versión correcta de Flash Player para ver el vídeo. Si el usuario carece de la versión correcta, la página muestra contenido alternativo que solicita al usuario que descargue la versión más reciente de Flash Player.

Nota:

Para ver archivos FLV, los usuarios deben tener instalado en sus equipos Flash Player 8 u otra versión posterior. Si un usuario no tiene instalada la versión necesaria de Flash Player pero tiene instalada la versión Flash Player 6.0 r65 u otra posterior, el navegador mostrará un instalador express de Flash Player en lugar del contenido alternativo. Si el usuario rechaza la instalación express, la página mostrará el contenido alternativo.

Para obtener más información sobre el uso de vídeo, visite el Centro de tecnología de vídeo en www.adobe.com/go/flv_devcenter_es.

Inserción de un archivo FLV

  1. Seleccione Insertar > HTML > Flash Video.

    Inserción de Flash video
    Inserción de Flash video

  2. En el cuadro de diálogo Insertar FLV, seleccione Descarga progresiva de vídeo o Flujo de vídeo en el menú emergente Tipo de vídeo.
  3. Complete el resto de las opciones del cuadro de diálogo y haga clic en OK.

Nota:

Microsoft Internet Information Server (IIS) no procesa etiquetas de objetos anidados. Para las páginas ASP, Dreamweaver utiliza código de objeto/incrustación anidado en lugar de código de objeto anidado al insertar archivos SWF o FLV.

Configuración de opciones para vídeo de descarga progresiva

El cuadro de diálogo Insertar FLV le permite establecer opciones para visualización con descarga progresiva de un archivo FLV insertado en una página web.

  1. Seleccione Insertar > HTML > Flash Video (o haga clic en el icono Flash Video en la categoría HTML del panel Insertar).

  2. En el cuadro de diálogo Insertar FLV, seleccione Descarga progresiva de vídeo en el menú Tipo de vídeo.
    Inserción de Flash video
    Inserción de Flash video

  3. Especifique las opciones siguientes:

    URL

    Especifica una ruta de acceso relativa o absoluta al archivo FLV. Para especificar una ruta de acceso relativa (por ejemplo, miruta/mivideo.flv), haga clic en el botón Examinar, desplácese hasta el archivo FLV y selecciónelo. Para especificar una ruta de acceso absoluta, escriba el URL (por ejemplo, http://www.ejemplo.com/mivideo.flv) del archivo FLV.

    Aspecto

    Especifica el aspecto del componente de vídeo. Se muestra una presentación preliminar del aspecto seleccionado bajo el menú emergente Aspecto.

    Anchura

    Anchura del archivo FLV, en píxeles. Dreamweaver determina la anchura del archivo FLV y podrá verla automáticamente en este campo.

    Altura

    Altura del archivo FLV, en píxeles. Dreamweaver optimiza automáticamente la altura del archivo FLV y podrá verla aparecer en este campo.

    Nota:

    Total con aspecto es el valor del ancho y alto del archivo FLV más el ancho y alto del aspecto seleccionado.

    Restringir

    Mantiene la misma relación de aspecto entre el ancho y el alto del componente de vídeo. Esta opción está activada de forma predeterminada.

    Reproducción automática

    Especifica si el archivo se va a reproducir al abrir la página web.

    Rebobinado automático

    Especifica si el control de reproducción vuelve al punto de inicio cuando finalice la reproducción.

  4. Haga clic en OK para cerrar el cuadro de diálogo y añadir el archivo FLV a la página web.

    El comando Insertar FLV crea un archivo SWF de reproductor de vídeo y un archivo SWF de aspecto que se utilizan para mostrar el contenido de vídeo en una página web. (Quizás tenga que hacer clic en el botón Actualizar del panel Archivos para ver los nuevos archivos). Estos archivos se almacenan en el mismo directorio que el archivo HTML al que está añadiendo contenido de vídeo. Cuando cargue la página HTML que incluye el archivo FLV, Dreamweaver cargará estos archivos como archivos dependientes (siempre y cuando haga clic en Sí en el cuadro de diálogo Colocar archivos dependientes).

Configuración de opciones para flujo de vídeo

El cuadro de diálogo Insertar FLV le permite establecer opciones para descarga de flujo de vídeo de un archivo FLV insertado en una página web.

  1. Seleccione Insertar > HTML > Flash Video (o haga clic en el icono Flash Video en la categoría HTML del panel Insertar).

  2. Seleccione Flujo de vídeo en el menú emergente Tipo de vídeo.
    Configuración de opciones para flujo de vídeo
    Configuración de opciones para flujo de vídeo

    URI de servidor

    Especifica el nombre de servidor, nombre de la aplicación y nombre de instancia con el formato rtmp://www.example.com/app_name/instance_name.

    Nombre de flujo

    Especifica el nombre del archivo FLV que desea reproducir (por ejemplo, mivideo.flv). La extensión .flv es opcional.

    Aspecto

    Especifica el aspecto del componente de vídeo. Se muestra una presentación preliminar del aspecto seleccionado bajo el menú emergente Aspecto.

    Anchura

    Anchura del archivo FLV, en píxeles. Dreamweaver determina la anchura del archivo FLV y rellena automáticamente la anchura en este campo.

    Altura

    Altura del archivo FLV, en píxeles. Dreamweaver determina la altura del archivo FLV y rellena automáticamente la altura en este campo.

    Nota:

    Total con aspecto es el valor del ancho y alto del archivo FLV más el ancho y alto del aspecto seleccionado.

    Restringir

    Mantiene la misma relación de aspecto entre el ancho y el alto del componente de vídeo. Esta opción está activada de forma predeterminada.

    Entrada de vídeo en vivo

    Especifica si el contenido de vídeo es contenido en vivo. Si se selecciona Entrada de vídeo en vivo, Flash Player reproducirá una entrada de vídeo en vivo transmitida en flujo desde Flash® Media Server. El nombre de la entrada de vídeo en vivo es el nombre especificado en el cuadro de texto Nombre de flujo.

    Nota:

    Para permitir la entrada de vídeo en vivo, debe seleccionar una de las opciones de apariencia Halo del campo Aspecto. Si activa la opción Entrada de vídeo en vivo, sólo aparecerá el control de volumen en el aspecto del componente, porque no es posible manipular el vídeo en vivo. Tampoco tendrán ningún efecto las opciones Reproducción automática y Rebobinado automático.

    Reproducción automática

    Especifica si el archivo se va a reproducir al abrir la página web.

    Rebobinado automático

    Especifica si el control de reproducción vuelve al punto de inicio cuando finalice la reproducción.

    Tiempo de búfer

    Especifica los segundos necesarios para almacenar en búfer el vídeo antes de iniciar su reproducción. El tiempo de búfer predeterminado es 0, de forma que el vídeo comienza a reproducirse inmediatamente después de pulsar el botón Reproducir. (Si se activa la opción Reproducción automática, el vídeo comenzará a reproducirse en cuanto se establezca una conexión con el servidor). Si lo desea, también puede establecer un tiempo de búfer, por ejemplo, si desea publicar contenido de vídeo con una velocidad de bits superior a la velocidad de conexión del usuario o cuando el tráfico de Internet pueda provocar cuellos de botella en el ancho de banda o problemas de conectividad. Por ejemplo, si desea enviar 15 segundos de vídeo a la página web antes de que ésta comience a reproducirlo, establezca un tiempo de búfer de 15.

  3. Haga clic en OK para cerrar el cuadro de diálogo y añadir el archivo FLV a la página web.

    El comando Insertar FLV crea un archivo SWF de reproductor de vídeo y un archivo SWF de aspecto que se utilizan para mostrar el vídeo en una página web. El comando también crea un archivo main.asc que debe cargarse en Flash Media Server. (Quizás tenga que hacer clic en el botón Actualizar del panel Archivos para ver los nuevos archivos). Estos archivos se almacenan en el mismo directorio que el archivo HTML al que está añadiendo contenido de vídeo. Cuando cargue la página HTML que incluye el archivo FLV, no olvide cargar los archivos SWF en el servidor Web y el archivo main.asc en Flash Media Server.

    Nota:

    Si ya hay un archivo main.asc en el servidor, consulte con el administrador del servidor antes de cargar el archivo main.asc creado por el comando Insertar FLV.

    Para cargar fácilmente todos los archivos multimedia necesarios, seleccione el marcador de posición del componente de vídeo en la ventana de documento de Dreamweaver y haga clic en el botón Cargar media del inspector de propiedades (Ventana > Propiedades). Para ver una lista de los archivos necesarios, haga clic en Mostrar archivos necesarios.

    Nota:

    El botón Cargar media no carga el archivo HTML que incluye el contenido de vídeo.

Edición de la información de descarga de Flash Player

Al insertar un archivo FLV en una página, Dreamweaver inserta código que detecta si el usuario dispone de la versión correcta de Flash Player. Si no dispone de ella, la página mostrará un contenido alternativo predeterminado que solicita al usuario que descargue la versión más reciente. Puede cambiar este contenido alternativo en cualquier momento.

Este procedimiento también es aplicable a archivos SWF.

Nota:

Si un usuario no dispone de la versión requerida pero dispone de Flash Player 6.0 r65 o posterior, el navegador mostrará un instalador express de Flash Player. Si el usuario rechaza la instalación express, la página mostrará el contenido alternativo.

  1. En la vista de Diseño de la ventana de documento, seleccione el archivo SWF o el archivo FLV.
  2. Haga clic en el icono de ojo del archivo SWF o del archivo FLV.

    Nota:

    También puede presionar Control + ] para cambiar a la vista de contenido alternativo. Para regresar a la vista de SWF/FLV, presione Control + [ hasta que se seleccione todo el contenido alternativo. Seguidamente, presione Control + [ de nuevo.

  3. Edite el contenido del mismo modo que cualquier otro contenido de Dreamweaver.

    Nota:

    No puede añadir archivos SWF o archivos FLV como contenido alternativo.

  4. Haga clic en el icono de archivo de nuevo para regresar a la vista de archivo SWF o FLV.

Solución de problemas con archivos FLV

En esta sección se detallan algunas de las causas más habituales de los problemas que surgen al usar archivos FLV.

Visualización de problemas provocados por la ausencia de archivos relacionados

El código generado por Dreamweaver CS4 y versiones posteriores se basa en cuatro archivos dependientes distintos del archivo FLV propiamente dicho:

  • swfobject_modified.js

  • expressInstall.swf

  • FLVPlayer_Progressive.swf

  • El archivo de aspecto (por ejemplo, Clear_Skin_1.swf)

Tenga en cuenta que hay dos archivos dependientes más para Dreamweaver CS4 y versiones posteriores en comparación con Dreamweaver CS3.

Los dos primeros archivos (swfobject_modified.js y expressInstall.swf) se instalan en una carpeta denominada Scripts, que Dreamweaver crea en la raíz del sitio si es que no existe ya.

Los otros dos archivos (FLVPlayer_Progressive.swf y el archivo de aspecto) se instalan en la misma carpeta que la página en la que se incrusta el archivo FLV. El archivo de aspecto contiene los controles para el FLV y su nombre depende del aspecto elegido en las opciones descritas en la Ayuda de Dreamweaver. Por ejemplo, si elige Clear Skin, el archivo se denominará Clear_Skin_1.swf.

Es OBLIGATORIO cargar los cuatro archivos dependientes en el servidor remoto para que el FLV se muestre correctamente.

Olvidarse de cargar estos archivos es la causa más habitual de que los archivos FLV no se ejecuten correctamente en una página web. Si falta alguno de los archivos, es posible que vea un "cuadro en blanco" en la página.

Para asegurarse de que carga todos los archivos dependientes, utilice el panel Archivos de Dreamweaver con el fin de cargar la página en la que aparece el FLV. Cuando cargue la página, Dreamweaver le preguntará si desea cargar los archivos dependientes (a no ser que haya desactivado esta opción). Haga clic en sí para cargar los archivos dependientes.

Problemas de visualización al obtener una vista previa de las páginas localmente

Debido a las actualizaciones de seguridad efectuadas en Dreamweaver CS4, no puede utilizar el comando Vista previa en el navegador para comprobar una página con un archivo FLV incrustado, a no ser que defina un servidor de prueba local en la definición de sitio de Dreamweaver y utilice el servidor de prueba para obtener la vista previa de la página.

Por lo general, un servidor de prueba sólo es necesario si desarrolla páginas con ASP, ColdFusion o PHP (consulte Configuración del equipo para el desarrollo de aplicaciones). Si crea sitios web que sólo usan HTML y no ha definido un servidor de prueba, al presionar F12 (Windows) Opc+F12 (Macintosh) aparecerán en pantalla controles de aspecto desordenados. La solución consiste en definir el servidor de prueba y utilizarlo para obtener una vista previa de la página, o bien en cargar los archivos en un servidor remoto y visualizarlos en él.

Nota:

Es posible que la configuración de seguridad también sea la causa de que no se pueda obtener una vista previa de contenido FLV local, aunque Adobe no ha podido comprobarlo. Puede probar a cambiar la configuración de seguridad para ver si se resuelve el problema. Para obtener más información sobre el cambio de los ajustes de seguridad, consulte la hoja técnica 117502.

Otras causas posibles de problemas con archivos FLV

  • Si tiene problemas a la hora de obtener una vista previa localmente, asegúrese de que no está seleccionada la opción Vista previa utilizando el archivo temporal en Edición > Preferencias > Vista previa en tiempo real.

  • Asegúrese de que dispone de los complementos de Flash Player más recientes

  • Evite mover archivos y carpetas fuera de Dreamweaver. Al mover archivos y carpetas fuera de Dreamweaver, Dreamweaver no puede garantizar que las rutas de acceso a los archivos relacionados de FLV sean correctas.

  • Puede reemplazar temporalmente el archivo FLV que está dando problemas por un archivo FLV del que tenga constancia que funciona correctamente. Si el archivo FLV sustituto funciona correctamente, el problema radicará en el archivo FLV original, no en el navegador o el equipo.

Edición o eliminación de un componente FLV

Para cambiar la configuración de vídeo de la página web, seleccione el marcador de posición del componente de vídeo en la ventana de documento de Dreamweaver y utilice el inspector de propiedades. Otro método consiste en eliminar el componente de vídeo y volver a insertarlo seleccionando Insertar > HTML > Flash Video.

Edición del componente FLV

  1. Seleccione el marcador de posición del componente de vídeo en la ventana de documento de Dreamweaver haciendo clic en el icono FLV situado en la parte central del marcador de posición.
  2. Abra el inspector de propiedades (Ventana > Propiedades) y realice los cambios.

    Nota:

    No puede cambiar los tipos de vídeo (por ejemplo, de descarga progresiva a flujo) mediante el inspector de propiedades. Para cambiar el tipo de vídeo, elimine el componente FLV y vuelva a insertarlo seleccionando Insertar > Media > FLV.

Eliminación del componente FLV

  1. Seleccione el marcador de posición del componente FLV en la ventana de documento de Dreamweaver y presione Eliminar.

Añadir vídeo (otros formatos)

Para saber como añadir vídeos que no sean archivos .flv, consulte Añadir vídeos (que no sean FLV)

También es posible que desee saber cómo insertar contenido de complementos en Dreamweaver para reproducir archivos .mp3 o vídeos de QuickTime en su sitio de Dreamweaver.

Esta obra está autorizada con arreglo a la licencia de Reconocimiento-NoComercial-CompartirIgual 3.0 Unported de Creative Commons.  Los términos de Creative Commons no cubren las publicaciones en Twitter™ y Facebook.

Avisos legales   |   Política de privacidad en línea