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

Los sitios web, los sitios móviles y las aplicaciones de escritorio acceden al contenido del servidor de Dynamic Media Classic de Adobe, incluido el vídeo, mediante cadenas URL o código incrustado. Adobe Dynamic Media Classic activa estas cadenas URL durante el proceso de publicación. Para colocar la cadena URL o el código incrustado del vídeo en las páginas web, las páginas móviles y las aplicaciones de escritorio, cópielo desde Adobe Dynamic Media Classic.

NOTA

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 que los servidores de Adobe Dynamic Media Classic entreguen vídeo a su 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 de vídeo, Adobe Dynamic Media Classic puede publicar vídeos automáticamente cuando se cargan y 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 vídeos, Adobe Dynamic Media Classic activa las cadenas URL de su página HTML o código de aplicación.

Para publicar vídeos:

  1. Realice una de las siguientes acciones:

    • Para publicar vídeos de forma automática e instantánea al cargarlos, en la página Cargar, seleccione Publicar después de cargar. Ya ha terminado; no tiene que seguir más pasos.
    • Para publicar vídeos manualmente después de la carga, en el panel Examinar, seleccione los vídeos y, a continuación, en la barra de navegación global, seleccione Publicar.

Vinculación de una URL de vídeo a un sitio móvil o sitio web

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 selecciona el vínculo, se detectan automáticamente su dispositivo, ancho de banda y tamaño de 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 Incrustar el visor de vídeo en una página web.

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

  1. En el panel Examinar recursos, en la lista desplegable Mostrar, seleccione 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:

    • Seleccione 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 Transmisión HTTP, seleccione Copiar URL a la derecha del visor que desee. Se recomienda copiar la URL asociada al visor de Universal_HTML5_Video.

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

      En la página Lista del visor, en la columna Acciones de la tabla, seleccione Copiar URL. Se recomienda copiar la URL asociada al visor de Universal_HTML5_Video.

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

      En la página Lista del visor, en la columna Acciones de la tabla, seleccione Copiar URL. Se recomienda copiar la URL asociada al visor de Universal_HTML5_Video.

    • Seleccione Vista de cuadrícula, Vista de lista o Vista de detalles. En la misma barra de herramientas, vaya a Preview > Viewer List.

      En la página Lista del visor, en la columna Acciones de la tabla, seleccione Copiar URL. Se recomienda copiar la URL asociada al visor de 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.

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

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

Consulte también Vincular una URL de vídeo a un sitio móvil o sitio web.

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

  1. En el panel Examinar recursos, en la lista desplegable Mostrar , seleccione 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:

    • Seleccione 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 Transmisión HTTP, seleccione Código incrustado a la derecha del visor que desee. Como práctica recomendada, seleccione Código incrustado asociado al visor Universal_HTML5_Video.

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

      En la página Lista del visor, en la columna Acciones de la tabla, seleccione Código incrustado. Como práctica recomendada, seleccione Código incrustado asociado al visor Universal_HTML5_Video.

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

      En la página Lista del visor, en la columna Acciones de la tabla, seleccione Código incrustado. Como práctica recomendada, seleccione Código incrustado asociado al visor Universal_HTML5_Video.

    • Seleccione Vista de cuadrícula, Vista de lista o Vista de detalles. En la misma barra de herramientas, vaya a Preview > Viewer List.

      En la página Lista del visor, en la columna Acciones de la tabla, seleccione Código incrustado. Como práctica recomendada, seleccione Código incrustado asociado al visor Universal_HTML5_Video.

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

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

  5. seleccione Cerrar.

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

Implementar código incrustado para usar vídeo HTML5 con recursos de vídeo MP4

Si no utiliza el reproductor de vídeo HTML5 de Adobe Dynamic Media Classic, sino que desea utilizar la etiqueta HTML5 <video> nativa con recursos de vídeo MP4, puede utilizar el siguiente ejemplo de código incrustado:

<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>

Implementar 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 personalizado en lugar de un visor de vídeo de Dynamic Media Classic, obtiene la URL de vídeo directa que funciona para el flujo de vídeo de varias bits HLS o la descarga progresiva.

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

  1. En Adobe Dynamic Media Classic, en la barra de navegación global, vaya a Configuración > Configuración de la 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 de vídeo de flujo directo HLS (velocidad de bits múltiple)

    En la página Configuración general de la aplicación, en el grupo Servidores, en el campo de texto Nombre del servidor publicado, construya la dirección URL directa. Utilice la siguiente sintaxis: server/is/content/company/folder/filename.m3u8

    Por ejemplo, supongamos que el nombre del servidor Publicado es https://s7d9.scene7.com/. Utilizando la sintaxis del paso 2, la dirección URL directa podría ser similar a la siguiente:
    https://s7d9.scene7.com/is/content/GeoRetail/AdobeRIA-AVS.m3u8

  • Para generar una URL de vídeo de flujo directo HLS (velocidad de bits única)

    En la página Configuración general de la aplicación, en el grupo Servidores, en el campo de texto Nombre del servidor de transmisión HLS, construya la URL directa con la siguiente sintaxis:

    server/company/folder/filename.ext.m3u8

    Por ejemplo, supongamos que el nombre del servidor de flujo HLS es https://s7mbrstream.scene7.com/hls-vod/. Con la sintaxis del paso 2, la dirección URL directa podría tener el siguiente aspecto:
    https://s7mbrstream.scene7.com/hls-vod/GeoRetail/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 https://s7d9.scene7.com/is/content/. Con la sintaxis del paso 2, la dirección URL directa podría tener el siguiente aspecto:
    https://s7d9.scene7.com/e2/GeoRetail/SourceVideo/outdoors.mp4

Trabajar con miniaturas de vídeo

Adobe Dynamic Media Classic genera miniaturas de vídeos codificados y vídeos precodificados. Puede utilizar las miniaturas de vídeo como cualquier otro recurso de imagen. Además, puede obtener direcciones URL para las miniaturas de vídeo que genera Adobe Dynamic Media Classic e implementar estas direcciones URL fuera de Adobe Dynamic Media Classic. 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.

Obtener direcciones URL de miniaturas de vídeo

Adobe Dynamic Media Classic genera miniaturas de vídeo automáticamente durante el proceso de carga. Las miniaturas aparecen en el panel Examinar de la Vista de lista y la Vista de cuadrícula.

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

Consulte Publicar 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. Seleccione Copiar URL a la derecha de la miniatura del vídeo para que pueda copiar su URL.

Modificación de marcos de póster en los visualizadores de vídeo

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. Adobe Dynamic Media Classic utiliza miniaturas de vídeo como marcos 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 Añadir o editar un ajuste preestablecido de visor de vídeo.

Consulte Image Serving Guide.

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

En esta página