Distribución de vídeos en sitios web y sitios móviles

Los sitios web, los sitios móviles y las aplicaciones de escritorio acceden al contenido del servidor de Scene7, incluido vídeo, a través de cadenas URL o código incrustado. Scene7 activa estas cadenas URL durante el proceso de publicación. Para colocar la cadena URL de vídeo o el código incrustado del vídeo en las páginas web, las páginas móviles y las aplicaciones de escritorio, debe copiar esta cadena desde Scene7 Publishing System.

Importante: La URL o el código incrustado no se activan hasta que publique el recurso.

Publicación de vídeo

La publicación de un vídeo permite a los servidores de Scene7 mostrar el vídeo en el sitio web, sitio móvil o aplicación.

Existen dos métodos que puede utilizar para publicar vídeos:

  • Publicación automática e instantánea de vídeos durante la carga

    Como parte del proceso de carga del vídeo, Scene7 puede publicar vídeos automáticamente cuando se cargan y se codifican. Esta capacidad para publicar inmediatamente significa que no es necesario publicar los vídeos por separado posteriormente.

  • Publicación manual de vídeos tras la carga

    Si no desea publicar vídeos inmediatamente, puede publicar los vídeos manualmente en cualquier momento.

Después de publicar los vídeos, Scene7 Publishing System activa las cadenas URL del código de la aplicación o página HTML.

Para publicar vídeos

Realice una de las siguientes acciones:

  • Para publicar vídeos de forma automática e instantánea durante la carga, haga clic en Publicar tras la carga en la pantalla de carga. Ya ha terminado; no tiene que seguir más pasos.

  • Para publicar vídeos de forma manual tras carga, en el panel Examinar, seleccione los vídeos y a continuación, en la barra de navegación global, haga clic en Publicar .

Vinculación de una URL de vídeo a sitios web o de dispositivos móviles

Una vez que haya publicado un vídeo, puede obtener su URL para utilizarla en un sitio web, un sitio de dispositivos móviles o una aplicación de escritorio. Utilice las URL de vídeo cuando desee mostrar vídeo en una ventana emergente o modal por encima de la página web.

Cuando un cliente haga clic en el vínculo, se detectará automáticamente el dispositivo, el ancho de banda y el tamaño de la pantalla. Se mostrará el vídeo apropiado para la reproducción en el visor predefinido para el ordenador o en el reproductor de vídeo nativo del dispositivo smartphone o tablet.

Consulte también Incrustación del visor de vídeo en páginas web .

Para vincular una URL de vídeo a sitios web o de dispositivos móviles

  1. En la lista desplegable Mostrar del panel de exploración de recursos, haga clic en Vídeo o Conjunto de vídeos adaptables .

  2. En el panel Biblioteca de recursos del lado izquierdo, navegue a la carpeta de recursos que contenga el vídeo o el conjunto de vídeos adaptables cuyo código incrustado desee vincular.

  3. Encima del panel de exploración de recursos, en la parte derecha de la barra de herramientas, realice una de las siguientes acciones:

    • Haga clic en Vista de cuadrícula o Vista de lista . En el panel de exploración de recursos, haga doble clic en la miniatura de vídeo de un solo recurso para abrirlo en la vista de detalles. En el panel URL y código incrustado de la derecha, en Flujo HTTP, haga clic en Copiar URL a la derecha del visor que desee. La práctica recomendada es copiar la URL asociada al visor Universal_HTML5_Video .

    • Haga clic en Vista de cuadrícula . En el panel de exploración de recursos, seleccione un único recurso y, a continuación, haga clic en Vista previa > Lista del visor debajo de la imagen en miniatura.

      En la página Lista del visor, en la columna Acciones de la tabla, haga clic en Copiar URL . La práctica recomendada es copiar la URL asociada al visor Universal_HTML5_Video .

    • Haga clic en Vista de lista . En el panel de exploración de recursos, seleccione un único recurso y, a continuación, haga clic en Vista previa > Lista del visor a la derecha de la imagen en miniatura.

      En la página Lista del visor, en la columna Acciones de la tabla, haga clic en Copiar URL . La práctica recomendada es copiar la URL asociada al visor Universal_HTML5_Video .

    • Haga clic en Vista de cuadrícula , Vista de lista o Vista de detalles . En la misma barra de herramientas, haga clic en Vista previa > Lista del visor .

      En la página Lista del visor, en la columna Acciones de la tabla, haga clic en Copiar URL . La práctica recomendada es copiar la URL asociada al visor Universal_HTML5_Video .

  4. Coloque el vínculo a la URL del vídeo HTML5 en el sitio web y el sitio de dispositivos móviles.

Incrustación del visor de vídeo en páginas web

Utilice la función de código incrustado si desea reproducir el vídeo incrustado en la página web. Copie el código incrustado en el portapapeles para pegarlo en sus páginas web. No se permite la edición del código en el cuadro de diálogo Código incrustado.

Consulte también Vinculación de una URL de vídeo a sitios web o de dispositivos móviles .

Para incrustar el visor de vídeo en una página web

  1. En la lista desplegable Mostrar del panel de exploración de recursos, haga clic en Vídeo o Conjunto de vídeos adaptables .

  2. En el panel Biblioteca de recursos del lado izquierdo, navegue a la carpeta de recursos que contenga el vídeo o el conjunto de vídeos adaptables cuyo código incrustado desea copiar.

  3. Encima del panel de exploración de recursos, en la parte derecha de la barra de herramientas, realice una de las siguientes acciones:

    • Haga clic en Vista de cuadrícula o Vista de lista . En el panel de exploración de recursos, haga doble clic en la miniatura de vídeo de un solo recurso para abrirlo en la vista de detalles. En el panel URL y código incrustado de la derecha, en Flujo HTTP, haga clic en Código incrustado a la derecha del visor que desee. La práctica recomendada es hacer clic en Código incrustado , asociado al visor Universal_HTML5_Video .

    • Haga clic en Vista de cuadrícula . En el panel de exploración de recursos, seleccione un único recurso y, a continuación, haga clic en Vista previa > Lista del visor debajo de la imagen de la miniatura de vídeo.

      En la página Lista del visor, en la columna Acciones de la tabla, haga clic en Código incrustado . La práctica recomendada es hacer clic en Código incrustado , asociado al visor Universal_HTML5_Video .

    • Haga clic en Vista de lista . En el panel de exploración de recursos, seleccione un único recurso y, a continuación, haga clic en Vista previa > Lista del visor a la derecha de la imagen en miniatura.

      En la página Lista del visor, en la columna Acciones de la tabla, haga clic en Código incrustado . La práctica recomendada es hacer clic en Código incrustado , asociado al visor Universal_HTML5_Video .

    • Haga clic en Vista de cuadrícula , Vista de lista o Vista de detalles . En la misma barra de herramientas, haga clic en Vista previa > Lista del visor .

      En la página Lista del visor, en la columna Acciones de la tabla, haga clic en Código incrustado . La práctica recomendada es hacer clic en Código incrustado , asociado al visor Universal_HTML5_Video .

  4. En el cuadro de diálogo Código incrustado, haga clic en Copiar al portapapeles .

    No se permite la edición del código en el cuadro de diálogo Código incrustado.

  5. Haga clic en Cerrar .

  6. Pegue el código incrustado en las páginas web.

Implementación de código incrustado para utilizar vídeo HTML5 con recursos de vídeo MP4 y OGG

Si no utiliza el reproductor de vídeo HTML5 de Scene7 y desea utilizar la etiqueta nativa HTML5 <video> con recursos de vídeo MP4 y OGG, puede utilizar el siguiente código incrustado de muestra: 

<video poster="S7 video thumbnail URL" controls> 
        <source src="S7 OGG video asset URL (no player)" type='video/ogg; codecs="theora, vorbis"'/> 
        <source src="S7 MP4 mobile progressive video asset URL (no player)" type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'/> 
        <p>This is fallback content</p> 
</video>

Implementación de vídeo con un reproductor de vídeo de terceros

Si utiliza un reproductor de vídeo de terceros o un reproductor de vídeo integrado personalizado en lugar de un visor de vídeo de Scene7, puede obtener la dirección URL de vídeo directa que funciona para el flujo continuo de vídeo de varias velocidades de bits iOS y HTTP o descarga progresiva.

Para implementar vídeo con un reproductor de vídeo de terceros

  1. En Scene7 Publishing System, en la barra de navegación global, haga clic en Ajustes > Ajustes de aplicación > Configuración general .

  2. Según el tipo de URL que desee utilizar, realice una de las tareas siguientes:

Para generar una URL directa de vídeo de flujo continuo HTTP para escritorio (varias velocidades)

  1. En la página Configuración general de la aplicación , en el grupo Servidores , campo de texto Servidor de publicación , cree la URL directa utilizando la siguiente sintaxis:

    server/is/content/company/folder/filename.f4m

    Por ejemplo, supongamos que el nombre del servidor de publicación es http://s7d9.scene7.com/ . Utilizando la sintaxis en el paso 2, la dirección URL directa puede tener el siguiente aspecto:

  2. http://s7d9.scene7.com/is/content/GeoRetail/AdobeRIA-AVS.f4m

Para generar una URL directa de vídeo de flujo continuo iOS (varias velocidades)

En la página Configuración general de la aplicación , en el grupo Servidores , campo de texto Servidor de publicación , cree la URL directa utilizando la siguiente sintaxis:

server/is/content/company/folder/filename.m3u8

Por ejemplo, supongamos que el nombre del servidor de publicación es http://s7d9.scene7.com/ . Utilizando la sintaxis en el paso 2, la dirección URL directa puede tener el siguiente aspecto:

http://s7d9.scene7.com/is/content/GeoRetail/AdobeRIA-AVS.m3u8

Para generar una URL directa de vídeo de flujo HTTP para escritorio (una sola velocidad de bits):

  1. En la página configuración general de la aplicación , grupo Servidores , en el campo de texto Nombre del servidor de flujo iOS , reemplace hls/vod por hd/vod en el nombre del servidor.

  2. Cree la URL de eVideo directa con la siguiente sintaxis:

    server/company/folder/filename.ext.f4m

    Por ejemplo, si se usa la sintaxis anterior, un ejemplo de URL de eVideo directa puede tener el siguiente aspecto:

    http://s7mbrstream.scene7.com/hds-vod/eVideoQA/MBR/ToyStory3_Teaser1_High_iPad_768x432_1296K.mp4.f4m

Para generar una URL directa de vídeo de flujo iOS (una sola velocidad de bits)

En la página configuración general de la aplicación , grupo Servidores , en el campo de texto Nombre del servidor de flujo iOS , combine server/company/folder/filename.ext.m3u8 con el nombre del servidor de flujo iOS.

Por ejemplo, supongamos que el nombre de servidor de flujo iOS es http://s7mbrstream.scene7.com/hls-vod/ . Utilizando la sintaxis del paso 2, la dirección URL de eVideo directa puede tener el siguiente aspecto:

http://s7mbrstream.scene7.com/hls-vod/eVideoQA/MBR/ToyStory3_Teaser1_High_iPad_768x432_1296K.mp4.m3u8

Para generar una URL directa de vídeo progresivo

En la página Configuración general de la aplicación , en el grupo Servidores , campo de texto Nombre del servidor de vídeo progresivo , cree la URL de eVideo directa utilizando la siguiente sintaxis:

server/company/folder/filename

Por ejemplo, supongamos que el nombre del servidor de vídeo progresivo es http://s7d9.scene7.com/e2/ . Utilizando la sintaxis del paso 2, la dirección URL de eVideo directa puede tener el siguiente aspecto:

http://s7d9.scene7.com/e2/GeoRetail/SourceVideo/outdoors.mp4

Uso de las miniaturas de vídeo

Scene7 genera miniaturas para reediciones de vídeo, vídeos codificados y vídeos precodificados. Puede utilizar las miniaturas de vídeo como cualquier otro recurso de imagen. Además, puede obtener las URL para las miniaturas de vídeo que genera Scene7 e implementar estas URL fuera de SPS. Por ejemplo, puede implementar las miniaturas en resultados de búsquedas, listados de vídeos relacionados y listas de reproducción de vídeos en un sitio web.

Las miniaturas se generan en función del primer fotograma heterogéneo (no en un fotograma todo negro o todo blanco, etc. ) del vídeo.

Consulte también Reediciones de vídeo .

Obtención de las URL de miniaturas de vídeo

Scene7 genera automáticamente miniaturas de los vídeos mientras los carga. Las miniaturas aparecen en el panel Examinar en la vista de lista y en la vista de cuadrícula.

Para generar direcciones URL para miniaturas de vídeo, realice una operación de publicación.

Consulte Publicación de vídeo .

Tras la publicación, puede obtener las URL de las miniaturas de vídeo en la vista de detalles del panel URL y código incrustado. Haga clic en Copiar URL a la derecha de la miniatura de vídeo para copiar su dirección URL.

Modificación de fotogramas de póster en visores de vídeos

El fotograma de póster es el fotograma inicial que aparece en los visores de vídeo antes de que el vídeo empiece a reproducirse. Scene7 utiliza miniaturas de vídeos como fotogramas de póster.

Puede aplicar modificadores de imagen al fotograma de póster. Por ejemplo, puede recortar el fotograma de póster o hacerlo transparente. Para modificar el fotograma de póster, abra la pantalla de configuración del visor de vídeo e introduzca modificadores en la sección Modificadores de imagen de póster.

Consulte Adición o edición de un ajuste preestablecido de visor de vídeo .

Visite www.adobe.com/go/learn_s7_image_server_guide_es .

También puede modificar las miniaturas de los vídeos agregando modificadores a las URL de las miniaturas de vídeo.