Début décembre, nous avons apporté une série de nouveautés au player vidéo flash. Aujourd'hui, nous lançons le player vidéo HTML5.

Grâce au player vidéo HTML5, vos visiteurs vont bénéficier de fonctionnalités avancées sur des terminaux où le flash n'est pas disponible. Je pense bien entendu à l'iPad quand j'écris cela mais il n'y a pas que iPad qui est concerné par cette grande nouveauté !

Concrètement pour vous, dans la gestion quotidienne de votre site, l'arrivée du player HTML5 ne change rien. Vous gérez dans votre back office la configuration de votre player vidéo. WMaker s'occupe d'appliquer vos paramétrages au player flash et au player HTML5. C'est "sous le capot" qu'il y a du nouveau. Voyons cela en détail.

Le player flash et le player html5 sont semblables en terme de design et de fonctionnalités.

Les 4 modèles de style s'appliquent aux 2 versions. Les fonctions de partage et d'affichage des metadonnées de la vidéo également.

Je vous renvoie donc à la note du 2 décembre sur les nouveautés du player vidéo pour re-découvrir en détail les possibilités de ce player.

Nous détectons automatiquement quel est le terminal qui appelle vos vidéos. Lorsqu'il s'agit d'un mobile ou d'une tablette, nous envoyons le player HTML5.

Mais qu'est-ce que ça veut dire en pratique ?

Vous savez tous, depuis la conférence HTML5 donnée par Laurent, qu'il existe de nouvelles balises qui pemettent d'indiquer aux navigateurs qu'une vidéo est présente sur une page web. Et bien, nous utilisons la balise <video> et nous spécifions l'emplacement de la vidéo à lire. Charge ensuite au navigateur web du mobile ou de la tablette de gérer en fonction de ses possibilités. Et c'est très variable en fonction des machines. Par exemple :

Lecture avec player HTML5 : c'est le cas de l'iPad. Il permet la lecture de la vidéo directement dans le navigateur web, avec toutes les fonctionnalités proposées par le player. Toutefois, si vous passez en mode plein écran, c'est le playeur natif de l'iPad qui prendra la main, et vous perdrez au passage les boutons de partage dans les réseaux sociaux.

Lecture avec player natif : c'est le cas des mobiles Android, WP7 et iOS. Le navigateur web détecte bien la balise <video>, car il est compatible HTML5, mais, pour ce qui est de la lecture, c'est le player natif du téléphone qui est utilisé. C'est le choix du constructeur et/ou de l'éditeur de l'OS de la machine. Nous ne pouvons rien y faire :|

Dans tous les cas, la vidéo est lue, et c'est bien là l'essentiel. Ainsi, peu impore le terminal utilisé par vos visiteurs, ils pourront toujours visonner les vidéos de votre site ou de votre Web TV.

Pour les vidéos embarquées, le nouveau code d'export permet de faire une auto-détection du terminal qui appelle la vidéo.

Si la vidéo embarquée est appelée par une tablette ou un téléphone, nous envoyons le player HTML5.

La compatibilité de lecture est donc maintenue également sur les vidéos embarquées ;)

Sur iPad, qui lit les vidéos directement dans le navigateur web, toutes les fonctions relatives à la diffusion de publicité sont disponibles.

Si vous utilisez la régie interne, vos pre-roll seront diffusés, ainsi que les publicités textuelles qui aparaissent au bout de 10 secondes de lecture de la vidéo.

Pour les utilisateurs Web TV qui diffusent leurs vidéos via stickyadsTV, nous sommes en rapport avec eux pour l'intégration de leur sdk HTML5. Le sdk est toujours en beta chez eux. Dès qu'il sera finalisé, nous rendrons compatible le player HTML5 avec cette régie.

Le player vidéo des Web TV vient de recevoir une mise à jour de taille. Plusieurs nouveautés ont été mises en production. Elles touchent notamment au design, aux fonctions d'export et de partage, aux pages de paramétrage ainsi qu'à la sécurité.

Voyons cela en détails :

Nous vous proposons 4 styles différents pour votre player vidéo : classique, modèle 2, modèle 3 et métro.

Les variations entre chaque player se situent au niveau de la position et l'épaisseur de la time line, l'affichage des bouton de partage lors du rollver, et les modifications possibles de couleurs.

Pour paramétrer le player, rendez-vous dans Design > Player

L'onglet Couleurs permet de choisir un set de 4 couleurs qui sera appliqué au player. Quatre propositions sont disponibles par défaut, mais vous pouvez créer votre propre set en choisissant des couleurs personnelles. Ceci existait avec le précédent player mais une nouveaué de taille fait son apparition dans cette page de paramétrage : le retour visuel immédiat ! Les développeurs ont fait un super boulot sur ce point. Avant, il était nécessaire de sauvegarder la page pour voir le résultat du paramétrage. Désormais, on voit la modification en temps réel et lorsqu'on clique sur Sauvegarder, les choix sont validés et publiés.

L'onglet Modèle permet de choisir le modèle de player. Les couleurs de classique, modèle 2 et modèle 3 sont modifiables contrairement à celles de métro qui reste blanc et vert, un choix artistique de notre part :)

Nous avons simplifié les actions disponibles dans le player. Quatre fonctions peuvent être activées ou désactivées :

Partager : active l'affichage des boutons twitter et facebook

Exporter : propose le bouton permettant de récupérer le code d'export de la vidéo

Playlist : affiche la playlist à la fin de la lecture de la vidéo

Auteur et Titre : affiche l'auteur et le titre de la vidéo lorsque celle-ci est stoppée

Il y a pas mal de nouveautés concernant l'export des vidéos, aussi bien techniques qu'esthétiques :

ibox
Vos utilisateurs configurent désormais le code d'export de vos vidéos à partir d'une ibox. Elle leur offre la possibilité de choisir plusieurs options : la taille de la video, l'affichage d'infos et de boutons d'actions dans le player, l'autoplay au début ou à un moment précis de la vidéo.

Depuis votre back office, dans l'onglet Export, c'est vous qui décidez quelles sont les options à proposer dans l'ibox. Ainsi, par exemple, vous pouvez masquer ou forcer l'affichage du titre de la vidéo. Il en va de même pour toutes les options proposées dans l'ibox

iframe
Les vidéos sont désormais embarquées dans une iframe. Pour vos utilisateurs, tout cela est complètement transparent. Cependant, cette nouvelle façon de procéder nous permet de controler quels sont le site et le type de terminal qui appellent la vidéo. Il est donc possible avec ce système d'interdire l'export sur certains site, ou alors d'envoyer une version HTML5 du player sur un iPad.
Si vous embarquez vos vidéos sur divers sites que vous gérez, je vous recommande de mettre à jour le code d'export que vous utilisiez jusqu'à présent, afin de bénéficier de ces nouvelles avancées.

Contrôle des domaines
Grâce à l'export via une iframe, nous savons quelle est le site qui appelle votre vidéo. Nous vous proposons donc une fonctionnalité de contrôle de l'export de vos vidéos.

Vous pouvez faire 2 types de contrôles :
- autoriser l'accès à certains sites. C'est le principe de la whitelist. Vous indiquez quels sont les seuls domaines autorisés à afficher vos vidéos. Tous les autres ne le pourront pas.

- interdire l'accès. C'est le principe de la blacklist. Vous indiquez quels sont les domaines sur lesquels la vidéo ne peut pas être exportée.

- Lorsqu'on clique sur le bouton HD dans le player, la vidéo ne repart plus du début. La qualité change et vous reprenez la lecture de la vidéo à l'endroit où vous avez cliqué sur HD.

- En mode plein écran, lorsqu'on clique sur un bouton de partage ou d'export, on quitte le mode plein écran et la vidéo est mise en pause.

- Vous pouvez forcer la lecture des vidéos embarquées en HD. Sachez juste que l'activation de cette option peut avoir un impact non négligeable sur la consommation de votre quota mensuel de données transférées.

- Nous avons réalisé un nouveau design pour la playlist, avec une grande vignette et plus d'informations concerant la vidéo. La playlist affiche les 20 dernières vidéos du site.

- En back office, dans la page d'édition d'une vidéo, dans l'onglet plus d'options, vous pouvez télécharger la fichier .mp4 de la vidéo encodée.

La mise en ligne de ces nouvelles fonctionnalités nous ouvre d'autres chantiers.

CMS
Les nouveautés évoquées ci-dessus concernent la Web TV. Nous allons maintenant en faire bénéficier les utilisateurs du CMS. Afin de faciliter la maintenance sur le player, nous avons d'ores et déjà implémenté le modèle classique du nouveau player dans le CMS.

HTML 5
Cette première vague de nouveautés concerne le player flash. Nous sommes déjà en train de construire la même chose dans un player HTML5. Ce player permettra d'assurer une compatibilité de la lecture de vos vidéos (publicités incluses !! ) sur tous les terminaux.
Concernant l'export, le player HTML5, couplé à l'iframe, permettra de lire vos vidéos sur n'importe quel terminal ..... et bien sûr iPad ! Ceux avec qui j'ai échangé de nombreux threads sur le sujet se reconnaitront :)

Je serai à Paris la semaine prochaine avec une bonne partie de l'équipe pour en discuter avec vous de vive voix. Alors, pour ceux qui le peuvent, rendez-vous le 7 décembre 2011 pour l'OpenCampus.

Insérer un diaporama dans un article, c'est une fonctionnalité que vous avez été nombreux à demander. Cette demande est d'ailleurs apparue le jour même de la réalisation du diaporama.

Promesse a été faite sur twitter d'un cadeau de noël pour ce lundi, et bien promesse a été tenue !!

Nous avons doté la fonction diaporama de quelques options qui la rendent encore plus sympa.

- Affichage du titre et de la description des photos;
- Choix de la vitesse de défilement des photos : lent, normal, rapide.

Par défaut, le titre et la description ne s'affichent pas, et la vitesse d'affichage est normale.

Les réglages se font coté utilisateur en cliquant sur le lien "option" dans le coin supérieur droit du diaporama.