MediaSPIP Player

Fichier Ogg Vorbis (conteneur Ogg)

kent1 — 2013-10-29T16:12:55Z

Lecteur par défaut

On n'a pas sélectionné de taille dans la base de donnée pour le lecteur.

Sa taille par défaut est donc celle utilisée par défaut dans le modèle.

Le code donne ceci :

1984-01

George Orwell R-(Frank Muller)
1984
1

Tableau de compatibilité

Navigateur	Version	Fonctionnement
Firefox	Toutes	Balise
Google Chrome	6+	Balise
Safari	5+	non
Internet Explorer	9+	non
Internet Explorer	7-8	non
Opera	Toutes	Balise
iOS	-	non

Fichier Opus (conteneur Ogg)

kent1 — 2013-10-29T15:58:26Z

Lecteur par défaut

On n'a pas sélectionné de taille dans la base de donnée pour le lecteur.

Sa taille par défaut est donc celle utilisée par défaut dans le modèle.

Le code donne ceci :

Tableau de compatibilité

Navigateur	Version	Fonctionnement
Firefox	Toutes	Balise
Google Chrome	6+	non
Safari	5+	non
Internet Explorer	9+	non
Internet Explorer	7-8	non
Opera	Toutes	non
iOS	-	non

Fichier AAC

kent1 — 2013-10-29T15:01:31Z

Lecteur par défaut

On n'a pas sélectionné de taille dans la base de donnée pour le lecteur.

Sa taille par défaut est donc celle utilisée par défaut dans le modèle.

Le code donne ceci :

Big Buck Bunny

Blender foundation
2008
Animation

Tableau de compatibilité

Navigateur	Version	Fonctionnement
Firefox	Toutes	Alternative flash
Google Chrome	6+	Balise
Safari	5+	Balise
Internet Explorer	9+	Balise
Internet Explorer	7-8	Alternative flash
Opera	Toutes	Alternative flash
iOS	-	Balise (non stylée)

Fichier WAV

kent1 — 2013-10-28T14:15:30Z

Lecteur par défaut

On n'a pas sélectionné de taille dans la base de donnée pour le lecteur.

Sa taille par défaut est donc celle utilisée par défaut dans le modèle.

Le code donne ceci :

Tableau de compatibilité

Navigateur	Version	Fonctionnement
Firefox	Toutes	Balise
Google Chrome	6+	Balise
Safari	5+	Balise
Internet Explorer	9+	Balise
Internet Explorer	7-8	Lecteur du système (Windows Media Player)
Opera	Toutes	Balise
iOS	-	Balise (non stylée)

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 :

Fichier MP3 seul avec une cover

kent1 — 2013-10-24T16:20:13Z

Le code produit :


Victory Lap : The Obama Mix Pt. 2: Z-Trip
2009-20-09

Le code produit :

Victory Lap : The Obama Mix Pt. 2

Z-Trip
2009-20-09

Fichier MP3 sans cover

kent1 — 2013-10-24T16:12:20Z

Lecteur par défaut

On n'a pas sélectionné de taille dans la base de donnée pour le lecteur.

Sa taille par défaut est donc celle utilisée par défaut dans le modèle.

Le code donne ceci :

Test avec un lecteur de plus en plus petit

On va réduire progressivement la taille du lecteur pour voir ce qu'il se passe.

Le code donne :

Le lecteur commence à être petit, le slider de volume passe en vertical, il n'est donc plus visible et prend moins de place ;

Le code donne :

La seconde partie du lecteur à devenir non nécessaire est le "temps restant" ;

Le code donne :

La troisième partie du lecteur non nécessaire est le bouton de "loop" ;

Le code donne :

La quatrième partie du lecteur non nécessaire est la barre de progression ;

Tableau de compatibilité

Navigateur	Version	Fonctionnement
Firefox	Toutes	Alternative flash
Google Chrome	6+	Balise
Safari	5+	Balise
Internet Explorer	9+	Balise
Internet Explorer	7-8	Alternative Flash
Opera	Toutes	Alternative flash

Rappel des types de fichiers utilisables

kent1 — 2013-10-24T14:15:35Z

Récapitulatif des formats audios

Navigateur	Ogg Vorbis	MP3	AAC	Wav	Opus
FireFox 3.6+	oui	oui (en utilisant un fallback flash)	oui (en utilisant un fallback flash)	oui	oui
Safari 5+	non	oui	oui	oui	non
Chrome 6+	oui	oui	oui	non	non
Opera 10.5+	oui	oui (en utilisant un fallback flash)	oui (en utilisant un fallback flash)	oui	non
Internet Explorer 9	non	oui	oui	oui	non
Autres	non	oui (en utilisant un fallback flash)	oui (en utilisant un fallback flash)	oui	non

Récapitulatif des formats vidéos

Navigateur	Ogg Theora	H.264 (mp4,mov,m4v)	WebM	Flv
FireFox 3.6+	oui	oui (en utilisant un fallback flash)	oui (à partir de la version 7)	oui (en utilisant un fallback flash)
Safari 5+	non	oui	non	oui (en utilisant un fallback flash)
Chrome 6+	oui	oui	oui	oui (en utilisant un fallback flash)
Opera 10.5+	oui	oui (en utilisant un fallback flash)	oui	oui
Internet Explorer 9	non	oui	non	oui (en utilisant un fallback flash)
Autres	non	oui (en utilisant un fallback flash)	non	oui (en utilisant un fallback flash)