Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

Open Source Media Framework

Compatible Flash Builder 4. Cliquer pour en savoir plus sur les compatibilités.Compatible ActionScript 3. Cliquer pour en savoir plus sur les compatibilités.Par d.exter (Denis exter), le 18 janvier 2010

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

Présentation

Suite au lancement de Youtube en 2005, le monde a connu une nouvelle forme de visualisation de medias, et de nombreux autres sites web s’en sont inspirés, en reprenant le concept et en l’adaptant à leurs propres besoins. Etant basé sur le format Flash de Adobe, les utilisateurs n’avaient plus besoin de télécharger différents plug-ins, mais pouvaient instantanément visualiser des larges formats et des vidéos de hautes qualités. Racheté par google, Youtube a connu de plus en plus de succès, et donc de plus en plus de clients ont commencé à demander ce type de format pour leur propre site. C’est ainsi que Adobe a mis en place cette librairie, pour permettre aux développeurs de produire des résultats similaires mais avec des temps de développement beaucoup plus court.

La librairie OSMF était à l’origine appelée par son nom de code « Strobe », et sa vocation était d’être une librairie permettant de construire des lecteurs de medias personalisés sur la plateforme Flash. Cela fait partie de l’initiative Open source de Adobe. Adobe a rendu ce projet open source, non seulement la librairie, mais aussi le code source à la communauté. Cela permet ainsi à la communauté d’ajouter des nouvelles fonctionnalités, ainsi que d’améliorer les existantes. Cette librairie est libre d’utilisation dans vos projets.

Les principales fonctionnalités sont:

  1. La création de composants pour les interfaces utilisateurs
  2. L'intégration d'images, audios et vidéos
  3. Le choix par l'utilisateur de la qualité de la vidéo (HD, basse résolution), depuis différents sources
  4. Une architecture extensible et open source pour les développeurs qui créent des plug-ins personalisé, mais aussi pour des réseaux de livraisons de contenu, des partenaires qui délivrent de la publicité, etc…

Cette librairie est développée en actionscript, elle est donc utilisable avec toutes les interfaces de programmation Flash, AIR et FLEX.

Il faut savoir que depuis Flash 6, il était possible d'incorporer des médias directement dans un site web. Les développeurs ont donc eu la possibilité de construire des sites webs spécialisés sur la distribution de médias grâce au runtime de Flash. Cependant, les nouvelles fonctionnalités des lecteurs de médias demandent beaucoup de travail aux développeurs. Il y a également de grosses différences entre la qualité d'un lecteur développé par un gros éditeur de média, et les autres avec des petits moyens. Un des problèmes fondamentaux est qu'il n'existe pas de lecteur de média standardisé intégré dans nos outils de développement.

Le runtime de Flash offre des possibilités infinies, mais si vous voulez créer un bon lecteur, il vous faudra quand même développer toutes les fonctionnalités de base comme “Play”, “Pause”, avance, retour, etc… C'est donc dans l'optique de parer à ces problèmes et de rendre la vie plus simple à tous que la librairie OSMF a été mise en place. Elle contient toutes les dernières fonctionnalités tel que le multi-bitrate streaming, HTTP streaming, le téléchargement progressif, la protection du contenu, etc…

Il existe bien les composant FLVPlayback et VideoDisplay me direz-vous, mais il s'agit de composants de base, qui sont difficiles à étendre. Nous sommes tous familiers avec les listes de lecture et aussi malheureusement avec la publicité intégrée au contenu, mais de mettre réellement en œuvre tout cela nous demande en tant que développeur de tout coder de A à Z. YouTube l'a fait, CBS l'a fait, BBC, ITV et beaucoup d'autres encore l'ont fait, mais ils l'ont tous construit à partir de zéro à chaque fois. C'est ce à quoi essaie de pallier la librairie OSMF.

Vous pouvez consulter toutes ses fonctionnalités sur le site de Adobe à l'adresse suivante:

http://opensource.adobe.com/wiki/display/osmf/Features+and+Specifications

Chaque mois, de nouvelles fonctionnalités sont développées, je vous conseille donc de suivre attentivement l’évolution.

Installation

Vous pouvez télécharger la librairie à l’adresse suivante :

http://www.opensourcemediaframework.com/index.html

Dans ce tutoriel, nous allons voir comment utiliser cette librairie, et l’intégrer dans un projet Flex, avec Flash Builder. Il vous faudra donc :

- Flash Builder (http://labs.adobe.com/technologies/flashbuilder4/) Nous allons commencer par créer un nouveau projet sous Flash builder, pour ce faire, cliquer sur : - Fichier –> Nouveau –> Projet Flex - Le nommer OSMF - Sélectionner Application web - Cliquer sur Terminer.

Le projet est ainsi créé.

Vous pouvez maintenant télécharger la librairie depuis l’adresse :

http://opensource.adobe.com/wiki/display/osmf/downloads

et extraire « MediaFramework.swc » depuis le fichier .zip et l’ajouter dans le répertoire /libs de votre projet.

Il nous faut encore créer la librairie « MediaPlayer.swc ». Pour cela, il suffit d’importer le projet MediaPlayer qui se trouve sous « apps\samples\framework\MediaPlayer » et de récupérer le fichier MediaPlayer.swc. Nous allons ensuite ajouter cette librairie à notre projet sous le répertoire /libs. Puis clic droit sur votre projet –> Propriétés –> Chemin de génération Flex et sous l’onglet « Chemin d’accès à la bibliothèque », il faut importer les librairies « MediaFramework.swc » & « MediaPlayer.swc » en cliquant sur « ADD SWC ».

Mise en application: Lecteur de vidéos

Pour notre exemple, nous allons créer un lecteur de vidéo local avec un bouton Play, Stop, un bouton permettant de couper le son, et l’affichage du chargement de la vidéo (nombre de bytes chargés et nombre de bytes total).

Nous allons commencer par ajouter 2 boutons à notre application dans un groupe horizontal, qui auront respectivement les fonctionnalités de lancer le film ou de le mettre sur pause, ainsi qu’une case à cocher qui permettra de couper le son :

<s:HGroup
			verticalAlign="middle"
			>
 
			<s:Button id="buttonPlay"
				label="Play"
				/>
			<s:Button
				id="buttonPause"
				label="Stop"
				/>
			<s:CheckBox
				id="muteToggle"
				selected="false"
				label="Mute"
				/>
		</s:HGroup>

Nous allons ensuite insérer des labels, qui vont nous permettre d’afficher le nombre de bytes total à charger, ainsi que l’avancement du chargement :

<s:HGroup>
 
			<mx:Label
				text="Bytes Loaded: "
				/>
			<mx:Label
				id="bytesLoaded"
				/>
			<mx:Label
				text="Bytes Total: "
				/>
			<mx:Label
				id="bytesTotal"
				/>
		</s:HGroup>

Nous plaçons ensuite, le lecteur de media, qui se trouve dans la librairie mediaPlayer.swc :

<players:MediaPlayerWrapper
				id="mediaPlayerWrapper"
				top="0"
				left="0"
				bottom="0"
				right="0"
				/>

Il faut ensuite importer les librairies utiles :

                        import org.osmf.media.URLResource;
			import org.osmf.net.NetLoader;
			import org.osmf.utils.URL;
			import org.osmf.video.VideoElement;
			import org.osmf.events.MediaPlayerCapabilityChangeEvent;
			import org.osmf.events.LoadEvent;

Nous allons maintenant placer les écouteurs d’événements sur nos différents éléments, lors du chargement de la page :

                        private function init():void
			{
 
	                        Security.allowDomain(this.systemManager.loaderInfo.loaderURL);
 
				buttonPlay.addEventListener(MouseEvent.CLICK, onPlayClick);
				buttonPause.addEventListener(MouseEvent.CLICK, onPauseClick);
				muteToggle.addEventListener(MouseEvent.CLICK, onToggleMuteClick);
				mediaPlayerWrapper.mediaPlayer.addEventListener(MediaPlayerCapabilityChangeEvent.LOADABLE_CHANGE, onCapabilityChange);
				mediaPlayerWrapper.mediaPlayer.addEventListener(LoadEvent.BYTES_TOTAL_CHANGE, onBytesTotalChange);
				mediaPlayerWrapper.mediaPlayer.addEventListener(LoadEvent.BYTES_LOADED_CHANGE, onBytesLoadedChange);
				        mediaPlayerWrapper.element=new VideoElement(new NetLoader(), new URLResource(new URL("medias/1920s.flv")));
				mediaPlayerWrapper.mediaPlayer.stop();
			}

Lorsque les écouteurs détectent un événement, ils appellent une fonction qui va exécuter l’action demandée (play, pause, mute, etc…), nous allons donc mettre en place ces fonctions : Nous allons commencer par l’événement du bouton play, lorsque l’on clique sur celui-ci, il suffit d’appeler la méthode play() du mediaplayer, qui lancera automatiquement la lecture du média.

                        private function onPlayClick(event:MouseEvent):void
			{
				mediaPlayerWrapper.mediaPlayer.play();
			}

Il en va de même pour mettre sur pause la lecture du media, il suffit simplement d’appeler la méthode pause() du lecteur de média.

 
			private function onPauseClick(event:MouseEvent):void
			{
				mediaPlayerWrapper.mediaPlayer.pause();
			}

Le lecteur de média contient déjà une function prédéfinie pour couper le son du media, il suffit donc juste d’appeler cette méthode, lorsque la case à cocher est sélectionnée.

 
			private function onToggleMuteClick(event:MouseEvent):void
			{
				mediaPlayerWrapper.mediaPlayer.muted = muteToggle.selected;
			}

Nous désirons ensuite, montrer à l’utilisateur l’état du chargement du media, afin qu’il patiente, la fonction affiche dans le label “bytesTotal”, le nombre total de bytes du media.

 
			private function onBytesTotalChange(event:LoadEvent):void
			{
				bytesTotal.text = event.bytes.toString();
			}

Cette fonction affiche le nombre de bytes actuellement chargé, elle permet donc d’afficher la progression en cours du chargement du media.

 
 
			private function onBytesLoadedChange(event:LoadEvent):void
			{
				bytesLoaded.text = event.bytes.toString();
			}

Nous avons mis un écouteur sur l’événement LOADABLE_CHANGE et appelons la fonction updateControls lorsqu’un changement est détecté.

 
			private function onCapabilityChange(event:MediaPlayerCapabilityChangeEvent):void
			{
				updateControls();
			}

Cette fonction remet donc à jour les labels en fonction de l’état du lecteur de média

 
			private function updateControls():void
			{
 
 
				if (mediaPlayerWrapper.mediaPlayer.loadable)
				{
					bytesTotal.text = "" + mediaPlayerWrapper.mediaPlayer.bytesTotal;
				}
				else
				{
					bytesTotal.text = "";
				}
 
 
				if (mediaPlayerWrapper.mediaPlayer.loadable == false)
				{
					bytesTotal.text = "";
					bytesLoaded.text = "";
				}
 
			}

Cette exemple est très simple, mais vous permet de voir avec quelle simplicité et rapidité on peut mettre en place un lecteur de média. J’espère que cette petite introduction vous aura donné envie d’en savoir plus sur cette librairie qui évolue très rapidement. Il y a beaucoup d’exemples à télécharger sur le site d’Adobe.

Je vous joins comme à l’habitude le fichier du projet.

osmf-exemple-source.zip