MediaSPIP Player

Exemple complet en autoplay, loop, muted

kent1 — 2013-10-25T02:19:42Z

L'exemple ci-dessous sont des balise video HTML5 complètes ayant deux sources différentes :

une vidéo mp4 dont le codec vidéo est H.264 ;
une video ogv dont le codec vidéo utilisé est Ogg Theora ;

autoplay : lecture automatique au chargement de la page

L'appel du modèle dans l'article est le suivant :

En plus des options de base center et largeur, on lui a ajouté le paramètre autoplay avec comme valeur oui.

Attention : sur les plateformes mobiles (iOS et Android par exemple), par souci d'économie de bande passante logique pour ce type de système d'exploitation, le paramètre autoplay des balises video n'est pas fonctionnel.

loop : lecture en boucle

Sintel

Sintel open movie project

L'appel du modèle dans l'article est le suivant :

muted : mise en sourdine au chargement

Elephants dream

Elephants Dream is the world's first open movie, made entirely with open source graphics software such as Blender, and with all production files freely available to use however you please, under a Creative Commons license.

L'appel du modèle dans l'article est le suivant :

Attention : sur les plateformes mobiles (iOS et Android par exemple), le paramètre muted des balises video n'est pas fonctionnel.

Exemple complet de balise HTML5

kent1 — 2013-10-25T02:10:05Z

Les document numéro 42 [1] est un document original au format avi qui a été encodé par SPIPmotion en 3 formats, mp4, ogv et webm.

La version mp4 est doit être lisible nativement sur Safari, Google Chrome et Internet Explorer > 9. Elle est également utilisée pour le lecteur de repli en flash pour les versions de navigateurs ne supportant pas la balise HTML5.

La version ogv n'est nécessaire que pour les anciennes versions de Firefox.

La version webm est très certainement la version du futur, permettant une meilleure intéropérabilité. Elle est visible dans Firefox, Google Chrome et Opéra pour le moment.

Avoir le lecteur vidéo sur l'ensemble de la largeur de la page

Il suffit d'utiliser le code .

Elephants dream

Le problème est que le modèle ne sachant pas calculer la hauteur de la vidéo (car la largeur est fixée en pourcentage du bloc parent), on est obligé d'attendre la récupération des métadonnées de la vidéo pour fixer en javascript sa hauteur en respectant le ratio.

Si la vidéo est très grande (comme notre exemple) et que la largeur est très réduite par rapport à la largeur du document original, il y aura un effet de disproportion visuelle au chargement de la page.

NB : il est également possible d'utiliser directement le modèle avec les mêmes arguments, cependant cet usage est contraire à la logique car c'est le modèle qui doit inclure les modèles typés , ou autres en fonction des types de fichiers à afficher.

Le code donne donc la même chose :

Elephants dream

[1] Ce document est le film Elephants Dream, le premier film ouvert créé, réalisé entièrement à l'aide de logiciels de graphisme open-source comme Blender, et dont l'ensemble des fichiers de production utilisés librement consultables sous une licence Creative Commons. cf : http://www.elephantsdream.org/

Simple version flv

kent1 — 2013-10-24T18:11:17Z

Un flv avec des métadonnées un peu pourries :

Un test avec le même flv seul sur lequel on a mis des metadonnées correctement :

Et là c'est le même fichier mais encodé via SPIPmotion qui est sensé être lisible partout :

Simple version webm

kent1 — 2012-02-10T18:07:22Z

Le code produit :

Utilisation du modèle doc par défaut de SPIP

Le code produit :

Un lecteur prenant 100% de la largeur du bloc parent ;
Après analyse des métadonnées de la vidéo, le code javascript modifiera la hauteur pour respecter le ratio de la vidéo.

Le code produit :

Un lecteur dont la largeur est de 300px ;
Si les données de largeur et hauteur sont entrées en base, alors le modèle d'inclusion génèrera une hauteur en fonction du ratio de la vidéo, sinon, après analyse des métadonnées de la vidéo, le javascript modifiera la hauteur pour respecter le ratio de la vidéo ;

Le code produit :

Un lecteur dont la hauteur est de 300px ;
Si les données de largeur et hauteur sont entrées en base, alors le modèle d'inclusion génèrera une largeur en fonction du ratio de la vidéo, sinon, après analyse des métadonnées de la vidéo, le javascript modifiera la largeur pour respecter le ratio de la vidéo ;

Les codes et produisent :

deux lecteurs flottants, l'un à droite, l'autre à gauche dont la largeur est de 300px ;
Si les données de largeur et hauteur sont entrées en base, alors les modèles d'inclusion génèreront une hauteur en fonction du ratio de la vidéo, sinon, après analyse des métadonnées de la vidéo, le javascript modifiera les largeurs pour respecter les ratios ;

Modèle video

Pour ceux qui utilisaient de vieux players auparavant utilisant le modèle directement, MediaSPIP Player reste compatible, le code affiche :



Simple version OGV
kent1 — 2012-02-10T14:28:31Z
Le code  produit :
Utilisation du modèle doc par défaut de SPIP.


Le code  produit :
    
Le code  produit :
    

NB : après analyse des métadonnées de la vidéo, le javascript modifiera la hauteur pour respecter le ration de la vidéo.
Le code  produit :
    

NB : après analyse des métadonnées de la vidéo, le javascript modifiera la largeur pour respecter le ration de la vidéo.
Modèle video
Pour ceux qui utilisaient de vieux players auparavant utilisant le modèle  directement, MediaSPIP Player reste compatible, le code  affiche :
    



Simple version MP4
kent1 — 2012-02-10T14:13:39Z
Le code  produit :


Le code  produit :
 Un lecteur prenant 100% de la largeur du bloc parent ;
 Après analyse des métadonnées de la vidéo, le code javascript modifiera la hauteur pour respecter le ratio de la vidéo.
    
Le code  produit :
 Un lecteur dont la largeur est de 300px ;
 Si les données de largeur et hauteur sont entrées en base, alors le modèle d'inclusion génèrera une hauteur en fonction du ratio de la vidéo, sinon, après analyse des métadonnées de la vidéo, le javascript modifiera la hauteur pour respecter le ratio de la vidéo ;
    

NB : après analyse des métadonnées de la vidéo, le javascript modifiera la hauteur pour respecter le ration de la vidéo.
Le code  produit :
 Un lecteur dont la hauteur est de 300px ;
 Si les données de largeur et hauteur sont entrées en base, alors le modèle d'inclusion génèrera une largeur en fonction du ratio de la vidéo, sinon, après analyse des métadonnées de la vidéo, le javascript modifiera la largeur pour respecter le ratio de la vidéo ;
    
Les codes  et  produisent :
 deux lecteurs flottants, l'un à droite, l'autre à gauche dont la largeur est de 300px ;
 Si les données de largeur et hauteur sont entrées en base, alors les modèles d'inclusion génèreront une hauteur en fonction du ratio de la vidéo, sinon, après analyse des métadonnées de la vidéo, le javascript modifiera les largeurs pour respecter les ratios ;
    
     
Modèle video
Pour ceux qui utilisaient de vieux players auparavant utilisant le modèle  directement, MediaSPIP Player reste compatible, le code  affiche :