Pour un login, une page d’attente, une présentation, il peut être très agréable et vivant de proposer un fond animé et quoi de mieux qu’une vidéo pour le faire… Mais comment utiliser une vidéo en fond d’écran ?
Pourquoi animer un fond d’écran ?
Comme je le disais en sous-titre (ci-dessus) il s’agit avant de proposer quelque chose de vivant là où il y a une attente. Dans la plupart des cas il s’agira d’une page de login. L’App attend qu’on tape ses identifiants, elle ne fait rien, et rien ne se passe, tout est figé. Ce n’est pas engageant. Si le fond est animé cela sera plus dynamique et s’il s’agit non d’une simple animation mais d’une vidéo alors l’effet pourra être bluffant !
Chacun pourra trouver d’autres utilisations, mais il ne faut pas abuser de la technique non plus. D’une part elle prend des ressources et d’autre part elle alourdit le chargement de l’App (même si on peut utiliser des techniques asynchrones pour ne rien ralentir du tout, cela demande juste plus de code).
Cette idée d’un fond animé me traverse l’esprit de temps en temps mais cela n’était pas très simple à faire et mon emploi du temps bien chargé ne me permet pas hélas de m’étendre trop sur ce qui n’est pas essentiel. Mais il y a quelque temps, je suis tombé sur un vieil article de blog intéressant décrivant comment créer un arrière-plan vidéo en plein écran pour une application cross-plateforme. À l'époque, ce post utilisait une ancienne version de Xamarin et donc la méthode lourde à base de renderer personnalisé et je me suis demandé si les tous derniers ajouts ne pouvaient rendre tout cela plus simple à faire. Vous pouvez toujours lire l'article d'origine pour voir la différence entre du code 2017 et le code récent qui va suivre, la comparaison est édifiante. Car aujourd’hui nous n'avons plus besoin d'écrire des rendus personnalisés ou d'exploiter les spécificités de la plateforme en XAML - nous pouvons réellement réaliser cette magnifique page de login entièrement en code Xamarin.Forms ! Cette fois-ci cela pouvait coller avec le temps imparti à l’écriture d’un article (n’oublions pas que j’en sors un par semaine plus tout le reste et que je ne m’autorise pas plus de 2 à 3h sauf sujet exceptionnel).
Flag Experimental
La seule mise en garde à cette expérience est que je vais utiliser MediaElement , un contrôle introduit dans Xamarin.Forms 4.5, mais qui est toujours en préversion au moment de l'écriture (actuellement à 4.8 stable). D'après mon expérience, les éléments en mode «Aperçu» sont généralement assez fiables, mais vous devrez garder un œil sur les bizarreries qui pourraient encore exister. Nous verrons par exemple qu’il y a un bug avec Android 10 qui nous obligera à une petite adaptation le temps que le contrôle soit en version définitive. Mais jusqu'à présent, j'ai trouvé que MediaElement était très performant pour des cas d’utilisation simples.
Dans cet esprit, nous devons configurer certains indicateurs pour permettre à notre application d'utiliser correctement MediaElement. Pour commencer, ajoutez la ligne suivante à votre App.xaml.cs (dans le projet Xamarin.Forms, en première ligne du constructeur) :
Device.SetFlags(new string[]{ "MediaElement_Experimental" });(pour ceux qui ont loupé un épisode, oui, c’est bien dans le projet XF qu’il faut placer cela, plus besoin d’aller le mettre dans chaque projet natif… Cela fait partie des petites préparations au saut vers MAUI où les projets natifs disparaitront !)
Avant d'aller trop loin, nous devrons organiser certaines ressources. Prenez n'importe quelle vidéo en boucle de votre choix (j’en ai bricolé une qui est très sympa avec ce joli expresso qui coule ! Je l’’ai raccourcie et j’ai allégé sa résolution pour en réduire la taille) et copiez-la dans chaque dossier de ressources de la plate-forme. Pour Android, ce sera Resources/raw/votreFichier.mp4(si vous n'avez pas encore ajouté de ressources de plate-forme vous devrez probablement créer ce dossier “raw” sous “Resources”) et définir l'action de génération sur AndroidResource. De même pour iOS, ajoutez votre fichier Resources/votreFichier.mp4 et assurez-vous que le fichier est configuré pour être généré en tant que fichier BundleResource.
Une fois ces bases posées nous sommes prêts pour la mise en oeuvre !
Simuler visuellement un login
Pour cet exemple je vais simuler une page de login avec saisie d’identifiants, un titre et un bouton de login. C’est sous ces contrôles que s’affichera la vidéo.
Le code XAML est vraiment rudimentaire :
<Grid>
<MediaElement x:Name="Video"
Source="ms-appx:///expresso.mp4" Aspect="AspectFill"
AutoPlay="True" Volume="0" IsLooping="True" />
<StackLayout VerticalOptions="Center">
<Label Text="Take Five" Style="{StaticResource Title}"/>
<Entry x:Name="Username" Placeholder="Utilisateur" Keyboard="Email" ReturnType="Next"/>
<Entry x:Name="Password" Placeholder="mot de passe" Keyboard="Text" IsPassword="True" ReturnType="Done"/>
<Button Text="Sign In"/>
</StackLayout>
</Grid>Normalement cela suffit. Si la vidéo est bien à sa place le page de login apparaitra :
Si votre vidéo ne s’affiche pas, avant de bricoler essayer juste de changer la source, par exemple en écrivant :
source=”https://youtu.be/5F-b6tXvH0E”
En effet le Media Element supporte des sources externes sur le Web… (ici une vide d’annonce de Xamarin.Forms 5, vous ne risquez pas de tomber sur un film hot juste au moment où votre boss passera vous voir !). Si la vidéo Web s’affiche c’est que vous avez un problème soit avec le nom de votre fichier, sa taille, sa résolution, son encodage qui n’est pas reconnu, etc.
Pour l’instant le MediaElement ne répond pas très bien au “hot reload” il faudra peut-être relancer l’App si vous faites des changements “à chaud” dans le code XAML.
Le styling
Ce n’est pas la partie intéressante de l’article mais voici les styles utilisés pour faire la mise à page que vous pouvez voir sur le Gif animé ci-dessus :
<ContentPage.Resources>
<Style TargetType="StackLayout">
<Setter Property="Spacing" Value="0"/>
<Setter Property="Margin" Value="45,0,35,150"/>
</Style>
<Style TargetType="Entry">
<Setter Property="TextColor" Value="White"/>
<Setter Property="PlaceholderColor" Value="#99ffffff"/>
<Setter Property="BackgroundColor" Value="#66000000"/>
<Setter Property="Margin" Value="0,0,0,15"/>
<Setter Property="HeightRequest" Value="50"/>
</Style>
<Style TargetType="Button">
<Setter Property="BackgroundColor" Value="Transparent"/>
<Setter Property="TextColor" Value="White"/>
</Style>
<Style x:Key="Title" TargetType="Label">
<Setter Property="FontAttributes" Value="Italic" />
<Setter Property="FontFamily" Value="" />
<Setter Property="FontSize" Value="36"/>
<Setter Property="TextColor" Value="White"/>
<Setter Property="Opacity" Value="0.85"/>
<Setter Property="Margin" Value="0,50,0,20"/>
<Setter Property="HorizontalOptions" Value="Center"/>
</Style>
</ContentPage.Resources>Ce ne sont que des définitions de style compatibles avec les tons utilisés par la vidéo. La stratégie qui consiste à séparer la mise en page de la définition des styles est en revanche un exemple à suivre et c’est pour cela que je le publie principalement.
Un problème temporaire
Au moment où j’écris ces lignes (fin 2020) il reste un bug dans le MediaElement sous Android 10 au moins. Le mode “AutoPlay” ne semble pas fonctionner. Pour résoudre ce problème qui sera peut-être réglé quand vous lirez ces lignes il faut utiliser une astuce. D’abord donner un nom à l’objet MediaElement (d’où la présence d’un x:Name sinon inutile dans mon code).
Ensuite dans le code behind de la page, au niveau du constructeur il faut ajouter cela :
Device.StartTimer(TimeSpan.FromSeconds(1), () =>
{
Video.Play();
Video.ScaleTo(0.99f);
Video.ScaleTo(1.00f);
return false;
});Ces quelques lignes vont différer de 1 seconde le lancement par “Play” de la vidéo et le double changement d’échelle inutile à première vue permet de régler le positionnement et la taille. Rien d’extraordinaire pour un code qui est à l’état “expérimental”. Nul doute que lorsque le MediaElement sera finalisé ce petit bricolage ne sera plus nécessaire. Mais ne changez pas le mode AutoPlay et les autres propriétés de mon exemple, le temps venu vous n’aurez juste qu’à supprimer le bout de code ci-dessus et tout marchera…
Conclusion
Une jolie vidéo en fond d’un écran de login peut rendre votre App bien plus attrayante tout en lui donnant un aspect ultra pro. Utilisez des vidéos mp4 standard, retaillez-les en fonction de la résolution des devices cibles, utilisez des logiciels de conversion de vidéo pour adapter tout cela au mieux aux mobiles, utiliser un soft de montage pour choisir la séquence la plus sympa à mettre en boucle et générez un mp4 ne contenant que ça, etc. Le but étant d’obtenir le meilleur compromis entre taille et qualité de rendu. Ici dans mon exemple la vidéo fait une dizaine de méga octets, elle pourrait être plus courte encore. Toutefois sur des devices qui désormais ont une RAM et des stockages qui se comptent en Giga et en centaines de Giga respectivement il ne faut pas trop mesquiner non plus, qui veut la fin, veut les moyens… Savoir “en jeter” sur une page de login que tout le monde verra peut valoir quelques mégas perdus…
A vous de bien utiliser la technique et de bien préparer votre boucle vidéo pour qu’elle soit la plus petite possible !
Stay Tuned !