Comment utiliser le MediaElement dans Xamarin.Forms

Nous explorons le MediaElement dans Xamarin.Forms – une nouvelle façon d'inclure facilement l'audio et la vidéo dans vos applications Xamarin.Forms.

Vous cherchez un moyen simple d'inclure des médias audio et vidéo dans votre application Xamarin.Forms? Jetez un œil au nouveau contrôle, actuellement "expérimental", le MediaElement. Ce contrôle, disponible dans la v.4.5, affiche un lecteur multimédia sur votre page, ainsi que les contrôles du système d'exploitation par défaut. Alternativement, vous pouvez fournir votre propre interface utilisateur et obtenir l'apparence exacte que vous souhaitez.

Définir les indicateurs

Comme ce contrôle est toujours en prévisualisation, vous devrez vous inscrire pour l'utiliser. Définissez simplement l'indicateur suivant dans votre app.xaml.cs avant l'appel à InitializeComponent () :

 Device.SetFlags (nouvelle chaîne [] {"MediaElement_Experimental"}) ;

Paramètres d'affichage

Les propriétés d'affichage de MediaElement incluent VideoHeight, VideoWidth et une propriété Aspect qui fonctionne à peu près comme un élément Image. Ainsi, AspectFill conservera l'aspect source, remplissant toute la hauteur et la largeur mais peut saigner à l'extérieur, tandis que AspectFit conservera également l'aspect source, mais s'adaptera à la hauteur et à la largeur du contrôle . Remplir remplira la hauteur et la largeur quel que soit l'aspect.

URI ou sources locales

La propriété Source peut être définie sur un URI ou un chemin local si vous souhaitez incorporer le média dans votre package d'application:

ou

Si vous suivez avec votre propre application, sachez que la vidéo dans l'exemple de code fait 250 Mo, donc vous voudrez peut-être vous assurer que vous êtes sur WiFi.

(Les VerticalOptions sont nécessaires au moment de la rédaction en raison d'un problème de mise en page – vous pouvez le trouver inutile, selon votre version spécifique.)

Notez l'utilisation du "ms -appx "pour la source locale et les emplacements suivants si vous utilisez un média local:

• Sur iOS, les fichiers multimédias doivent être stockés dans le dossier Resources ou un sous-dossier du dossier Resources. Le fichier multimédia doit avoir une action de génération de BundleResource.
• Sur Android, les fichiers multimédias doivent être stockés dans un sous-dossier de ressources nommé raw. Le dossier brut ne peut pas contenir de sous-dossiers. Le fichier multimédia doit avoir une action de génération d'AndroidResource.
• Sur UWP, les fichiers multimédias peuvent être stockés dans n'importe quel dossier du projet.

Par défaut, le média commence à jouer dès qu'il est chargé, donc si c'est tout ce dont vous avez besoin, vous avez terminé!

In Control

Par défaut, les contrôles multimédias natifs de la plate-forme seront utilisés, mais c'est assez simple pour éviter cela si vous souhaitez fournir les vôtres.

Définissez ShowPlaybackControls = "False" et utilisez les méthodes Play () Pause () et Stop () pour contrôler la lecture avec vos propres boutons.

Vous pouvez encore affiner l'expérience. en utilisant des propriétés supplémentaires:

• La lecture automatique spécifie si le média commencera automatiquement la lecture au chargement
• Volume contrôle le volume
• CanSeek spécifie si la recherche est activée
• IsLooping contrôle la répétition automatique à la fin de la lecture [1 9659017] Vous pouvez également vous connecter à une sélection d'événements qui vous aideront à peaufiner votre application. Vous pouvez les utiliser pour piloter des indicateurs de chargement ou des commandes de lecture personnalisées:
  • Ouverture lorsque le contrôle tente d'ouvrir et de valider la source
  • Mise en mémoire tampon le média se charge
  • Lecture le média est en cours de lecture
  • En pause la lecture est interrompue et le contrôle affiche l'image actuelle
  • Arrêté Arrêté le le contrôle contient un média mais n'est pas en cours de lecture ou en pause; dans cet état, le contrôle affichera le premier cadre
  • Fermé un cadre transparent est affiché car le contrôle n'a pas de support

  Garder les lumières allumées

  Il y a une autre propriété que vous pouvez trouver utile – KeepScreenOn . Réglez ce paramètre sur True et l'appareil devrait garder l'écran allumé pendant la lecture.

  Récapitulatif

  Le MediaElement facilite vraiment la lecture de vos médias dans vos applications multiplates-formes. Consultez les documents officiels pour plus d'informations.

  ---