Desde el día 21 de diciembre de 2016 a todo los videos en demanda que son subidos a Mediastream Platform se les genera dos (sub) videos de preview de resolución 426x240 útiles crear Previews Animados en tus sitios web. Los videos son generados sin audio y en formato .mp4 (video codec h.264) y .webm (video codec VP8). con la finalidad de asegurar reproducción nativa en HTML5 con el tag <video>.
El video es generado automáticamente cuando se sube un video a la plataforma, la duración del video es de 5 segundos a partir del primer cambio de escena detectado en los primeros 30 segundos del video. En el siguiente link puedes ver un demo funcional https://jsfiddle.net/skgL4514/2/ y a continuación te explicamos como realizarlo.
Insertar preview en Sitio Web
Para que el preview funcione en todos los navegadores web es necesario incluir ambos videos en el tag <video> como se muestra a continuación, de esta forma el preview en video estará disponible en todas las versiones de Chrome, IE, Edge, Firefox y Safari.
Ejemplo:
<video width="320" height="180" autoplay loop muted>
<source src="https://mdstrm.com/video/585a86acd21be6e024725fe8/preview.mp4" type="video/mp4">
<source src="https://mdstrm.com/video/585a86acd21be6e024725fe8/preview.webm" type="video/webm">
</video>
La información del video se puede obtener directamente desde la información que entrega la API de Mediastream Platform (/api/media/<id_media>) en el atributo preview. En general la URL de los archivos responde a la siguiente ruta:
https://mdstrm.com/video/<id_video>/preview.mp4
o
https://mdstrm.com/video/<id_video>/preview.webm
pero recomendamos siempre corroborar si la URL está disponible en la API.
También recomendamos considerar siempre en el tag video la opción de poster que permite desplegar una imagen mientras el video es descargado o en caso que no se pueda desplegar al usuario. Ejemplo:
<video width="320" height="180" autoplay loop muted poster="https://mdstrm.com/thumbs/51c2f628b440bd797900051f.jpg">
<source src="https://mdstrm.com/video/585a85fe8/preview.mp4" type="video/mp4">
<source src="https://mdstrm.com/video/585725fe8/preview.webm" type="video/webm">
</video>
La URL de la imagen también puede ser obtenido directamente desde la API de Mediastream Platform.
Si tienes alguna pregunta relacionada por favor no dudes en escribirnos a través del chat.
Atte. El Equipo de Mediastream
