Distribución de vídeo en los sitios web y sitios móviles deploying-video-to-your-websites-and-mobile-sites
Los sitios web, los sitios móviles y las aplicaciones de escritorio acceden al contenido del servidor de Adobe Dynamic Media Classic, 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, páginas móviles y aplicaciones de escritorio, cópielo desde Adobe Dynamic Media Classic.
Publicación de vídeo publishing-video
La publicación de un vídeo permite a los servidores de Adobe Dynamic Media Classic enviar vídeos a su sitio web, sitio móvil o aplicación.
Existen dos métodos diferentes que puede utilizar para publicar vídeos:
-
Vídeos de Publish de forma automática e instantánea al cargar: Como parte del proceso de carga de vídeos, Adobe Dynamic Media Classic puede publicar vídeos automáticamente cuando se cargan y codifican. Esta capacidad de publicación instantánea significa que no hay necesidad de publicar vídeos por separado después del hecho.
-
Vídeo de Publish manualmente después de la carga: Si no desea publicar vídeos inmediatamente, puede publicarlos manualmente en cualquier momento.
Después de publicar los vídeos, Adobe Dynamic Media Classic activa las cadenas URL de la página del HTML o del código de la aplicación.
Para publicar el vídeo:
-
Realice una de las siguientes acciones:
- Para publicar vídeos de forma automática e instantánea al cargar, en la página Cargar, selecciona Publish 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, selecciona los vídeos y, a continuación, en la barra de navegación global, selecciona Publish.
Vinculación de una URL de vídeo a un sitio móvil o sitio web linking-a-video-url-to-a-mobile-site-or-a-website
Al publicar un vídeo, puede obtener su URL asociada para utilizarlo en su sitio web, sitio móvil o aplicación de escritorio. Utilice la dirección URL del vídeo cuando desee mostrar el vídeo en una ventana emergente o modal en la parte superior 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.
Vea también Incrustar el visor de vídeo en una página web.
Para vincular una dirección URL de vídeo a un sitio móvil o sitio web:
-
En el panel Examinar recursos, en la lista desplegable Mostrar, seleccione Vídeo o Conjunto de vídeos adaptable.
-
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.
-
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 Direcciones URL e Código incrustado que se encuentra a la derecha, en Transmisión HTTP, seleccione Copiar URL a la derecha del visor que desee. Como práctica recomendada, copie la dirección URL asociada con el visor
Universal_HTML5_Video
. -
Seleccione Vista de cuadrícula. En el panel Examinar recursos, seleccione un solo recurso y, debajo de la imagen en miniatura, vaya a Vista previa > Lista de visualizadores.
En la página Lista de visores, en la columna Acciones de la tabla, seleccione Copiar URL. Como práctica recomendada, copie la dirección URL asociada con el visor
Universal_HTML5_Video
. -
Seleccionar vista de lista. En el panel Examinar recursos, seleccione un solo recurso y, a continuación, a la derecha de la imagen en miniatura, vaya a Vista previa > Lista de visualizadores.
En la página Lista de visores, en la columna Acciones de la tabla, seleccione Copiar URL. Como práctica recomendada, copie la dirección URL asociada con el visor
Universal_HTML5_Video
. -
Seleccione Vista de cuadrícula, Vista de lista o Vista de detalles. En la misma barra de herramientas, vaya a Vista previa > Lista de visualizadores.
En la página Lista de visores, en la columna Acciones de la tabla, seleccione Copiar URL. Como práctica recomendada, copie la dirección URL asociada con el visor
Universal_HTML5_Video
.
-
-
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 embedding-the-video-viewer-on-a-web-page
Utilice la función Código incrustado cuando desee 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.
Ver 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:
-
En el panel Examinar recursos, en la lista desplegable Mostrar, seleccione Vídeo o Conjunto de vídeos adaptable.
-
en el panel Biblioteca de recursos, en el lado izquierdo, navegue hasta la carpeta de recursos que contenga el vídeo o el conjunto de vídeos adaptable cuyo código incrustado desee copiar.
-
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 Direcciones URL y código incrustado que se encuentra a 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 que está asociado con el visor
Universal_HTML5_Video
. -
Seleccione Vista de cuadrícula. En el panel Examinar recursos, seleccione un solo recurso y, debajo de la imagen en miniatura de vídeo, seleccione Vista previa > Lista de visualizadores.
En la página Lista de visores, en la columna Acciones de la tabla, seleccione Código incrustado. Como práctica recomendada, seleccione Código incrustado que está asociado con el visor
Universal_HTML5_Video
. -
Seleccionar vista de lista. En el panel Examinar recursos, seleccione un solo recurso y, a continuación, a la derecha de la imagen en miniatura, vaya a Vista previa > Lista de visualizadores.
En la página Lista de visores, en la columna Acciones de la tabla, seleccione Código incrustado. Como práctica recomendada, seleccione Código incrustado que está asociado con el visor
Universal_HTML5_Video
. -
Seleccione Vista de cuadrícula, Vista de lista o Vista de detalles. En la misma barra de herramientas, vaya a Vista previa > Lista de visualizadores.
En la página Lista de visores, en la columna Acciones de la tabla, seleccione Código incrustado. Como práctica recomendada, seleccione Código incrustado que está asociado con el visor
Universal_HTML5_Video
.
-
-
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.
-
seleccione Cerrar.
-
Pegue el código incrustado en las páginas web.
Implementar código incrustado para utilizar vídeo de HTML5 con recursos de vídeo MP4 implementing-embed-code-for-using-html-video-with-mp-video-assets
Es posible que no desee utilizar el reproductor de vídeo Adobe Dynamic Media Classic HTML5. En su lugar, si desea utilizar la etiqueta nativa HTML5 <video>
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>
-
Reemplace
"S7 video thumbnail URL"
por la URL de la miniatura del vídeo, que es la imagen en miniatura que el usuario ve antes de reproducir el vídeo. -
Reemplace
"S7 OGG video asset URL (no player)"
por la URL progresiva del vídeo para el vídeo OGG. -
Reemplace
"S7 MP4 mobile progressive video asset URL (no player)"
por la URL móvil progresiva del vídeo.
Implementación de vídeo mediante un reproductor de vídeo de terceros deploying-video-using-a-third-party-video-player
Si utiliza reproductores de vídeo de terceros o un reproductor de vídeo personalizado en lugar de un visor de vídeo de Dynamic Media Classic, obtendrá la URL de vídeo directo que funciona para la descarga progresiva o la transmisión de vídeo a varias velocidades de bits HLS.
Para implementar vídeo mediante un reproductor de vídeo de terceros:
- En Adobe Dynamic Media Classic, en la barra de navegación global, ve a Configuración > Configuración de la aplicación > Configuración general.
- Según el tipo de URL que desee utilizar, realice una de las tareas siguientes:
-
Para generar una URL de vídeo de flujo HLS directa (varias velocidades de bits)
En la página Configuración general de la aplicación, en el grupo Servidores, en el campo de texto Nombre del servidor publicado, cree 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 tener el aspecto siguiente:https://s7d9.scene7.com/is/content/GeoRetail/AdobeRIA-AVS.m3u8
-
Para generar una URL de vídeo de flujo HLS directa (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 flujo HLS, cree la dirección 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, suponga 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
Trabajo con miniaturas de vídeo working-with-video-thumbnails
Adobe Dynamic Media Classic genera miniaturas para 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 direcciones URL de las miniaturas de vídeo que genera Adobe Dynamic Media Classic. A continuación, puede 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 URL de miniaturas de vídeo obtaining-video-thumbnail-urls
Adobe Dynamic Media Classic genera miniaturas de vídeo automáticamente durante el proceso de carga. Las miniaturas aparecen en el panel Examinar de las vistas Lista y Cuadrícula.
Para generar direcciones URL para miniaturas de vídeo, realice una operación de publicación.
Ver vídeo de Publish.
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 de vídeo para poder copiar su URL asociada.
Modificación de fotogramas de póster en visores de vídeo modifying-poster-frames-in-video-viewers
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 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 Agregar o editar un ajuste preestablecido de visualizador de vídeo.
Consulte Guía de servicio de imágenes.
También puede modificar las miniaturas de los vídeos agregando modificadores a las URL de las miniaturas de vídeo.