Uno de los plugins que Microsoft pone a nuestra disposición es Microsoft Smooth Streaming Plugin para OSMF con Azure Media MPEG-DASH support. Gracias a él extendemos las capacidades de OSMF (Open Source Media Framework de Adobe) añadiendo Microsoft Smooth Streaming a los reproductores que utilizan esta tecnología, así como la reproducción sobre Strobe Media Playback (SMP).
Gracias a este plugin añadiremos siguientes características:
- On-demand Smooth Streaming playback (Play, Pause, Seek, Stop)
- On-demand Azure Media MPEG-DASH playback (beta) (Play, Pause, Seek, Stop)
- Live Smooth Streaming playback (Play)
- Live Smooth Streaming DVR playback (Play, Pause, Seek, go-to-live)
- Support for video codecs – H.264
- Support for Audio codecs – AAC
- Multiple audio language switching with OSMF built-in APIs
- Max playback quality selection with OSMF built-in APIs
- This version only supports OSMF 2.0
A través del siguiente enlace podemos descargar un conjunto de archivos:
- MSAdaptiveStreamingPlugin-v1.0.10-osmf2.0.swc: Se facilita para la carga estática (en tiempo de compilación) del plugin.
- MSAdaptiveStreamingPlugin-v1.0.10-osmf2.0.swf: Plugin precompilado para la carga dinámica.
- Smooth_Streaming_Plugin_for_OSMF.pdf: Documentación sobre el uso del plugin
- SmoothStreamingPlugin_EULA.rtf: Licencia del plugin.
- StrobeMediaPlayback.2.0.swf: Reproductor Strobe Media Playback
En este post nos centraremos en la carga dinámica del plugin, utilizando MSAdaptiveStreamingPlugin-v1.0.10-osmf2.0.swf.
Configuración del reproductor
Para poder probar el reproductor junto con Microsoft Azure Media Services, debemos tener al menos un asset preparado para Smooth Streaming. La configuración del reproductor utilizando las diferentes partes sería la siguiente:
<object type="application/x-shockwave-flash" data="/OSMF/StrobeMediaPlayback.2.0.swf" width="920" height="640" id="flashPlayer" style="visibility: visible;"> <param name="allowfullscreen" value="true"> <param name="wmode" value="direct"> <param name="flashvars" value="src=http://[YOUR_MEDIA_ACCOUNT].origin.mediaservices.windows.net/[LOCATOR]/[FILE_NAME].ism/Manifest&autoPlay=true&plugin_AdaptiveStreamingPlugin=/OSMF/MSAdaptiveStreamingPlugin-v1.0.10-osmf2.0.swf&AdaptiveStreamingPlugin_retryLive=true&AdaptiveStreamingPlugin_retryInterval=10"> </object>
Como data utilizamos el reproductor StrobeMediaPlayback.2.0.swf, alojado en este caso en la carpeta OSMF. En el parámetro flashvars están incluidos los siguientes valores en este orden:
- URL del asset a reproducir.
- autoPlay=true para la reproducción automática.
- plugin_AdaptiveStreamingPlugin con la ruta del plugin para OSMF
- AdaptiveStreamingPlugin_retryLive=true y AdaptiveStreamingPlugin_retryInterval=10 para activar el reintento en caso de pérdida de la conexión.
Si quisiéramos reproducir MPGE-DASH (todavía en beta), la configuración sería la siguiente:
<object type="application/x-shockwave-flash" data="/OSMF/StrobeMediaPlayback.2.0.swf" width="920" height="640" id="flashPlayer" style="visibility: visible;"> <param name="allowfullscreen" value="true"> <param name="wmode" value="direct"> <param name="flashvars" value="src=http://[YOUR_MEDIA_ACCOUNT].origin.mediaservices.windows.net/[LOCATOR]/[FILE_NAME].ism/Manifest(format=mpd-time-csf)&autoPlay=true&plugin_AdaptiveStreamingPlugin=/OSMF/MSAdaptiveStreamingPlugin-v1.0.10-osmf2.0.swf&AdaptiveStreamingPlugin_retryLive=true&AdaptiveStreamingPlugin_retryInterval=10"> </object>
Como se puede ver en el código anterior, lo único que debemos modificar es la petición para obtener formato MPEG-DASH, añadiendo después de Manifest (format=mpd-time-csf). También te puede interesar reproducir MPEG-DASH utilizando Dash.js, hablado ya en un post anterior.
Espero que sea de utilidad.
Happy streaming!