lundi 28 novembre 2011

Kit d'intégration vidéo Flash et HTML5


Voici un kit d'intégration SWFObject modifié maison, que j'ai concocté pour vous permettre d'intégrer une vidéo en Flash, en HTML5 et le cas échéant, sous la forme d'un hyperlien de téléchargement en simple HTML.

Télécharger le kit d'intégration vidéo Flash HTML5

Dans ce kit, vous trouverez un fichier FLA et ses SWF. Le SWF appelle une enveloppe MinimaFlatCustomColorAll.swf ainsi que la vidéo placée dans le dossier video/.

Les fichiers du dossier scripts/ permettent de piloter l'affichage en fonction de la configuration utilisateur. Le fichier swfObject.js affiche d'abord le HTML5 alternatif placé dans le corps de la page Web. Si, et uniquement si le player Flash est disponible, il lance le Flash en pleine page.

Les balises video placées dans le corps de la page HTML permettent de gérer l'affichage de la vidéo indépendamment de l'interactivité déployée au format Flash, pour les tablettes mobiles et les smartphones qui ne possèdent pas de player Flash. Les noms des navigateurs compatibles avec les différents formats de vidéo sont indiqués en commentaire. Attention, dans le kit, seule une vidéo au format mov et codée en H264 est disponible. Il vous faudra créer les autres fichiers si vous souhaitez tester les formats à destination des autres navigateurs.

Une feuille de styles permet de neutraliser les marges du document et de forcer l'affichage du contenu à 100% pour Opéra. Attention, l'option overflow est passée sur hidden afin de neutraliser les ascenseurs. A retirer si le contenu alternatif est imposant.

L'intégration du Flash est conçu pour que le calcul de l'affichage de la vidéo soit géré directement par la carte graphique et non par le processeur. Une version de lecteur 10.2 est requise pour ce faire. Par ailleurs, dans le FLA, la vidéo est également placée sur le calque de l'arrière-plan et le codec de la vidéo externalisée et partagée avec les balises HTML est H264. Le le paramètre wmode affiché dans le script de l'entête HTML est enfin défini sur la valeur direct. Ces 3 paramètres sont requis pour que seule la carte graphique gère la lecture de la vidéo.

Une option autorise, pour finir, l'affichage en mode plein écran dans l'entête de la page HTML.

Consultez aussi l'article sur l'intégration de Flash depuis le kit personnalisé en français :
http://bloc-notes-arzhur.blogspot.com/2011/12/kit-dintegration-flash-3d-pour-iphone.html

Aucun commentaire:

Enregistrer un commentaire