Fermer

novembre 23, 2018

Ne faites pas de vos utilisateurs "ce type" la lecture de vidéos dans les applications Web


Vous connaissez "ce gars-là", celui qui souffle toujours du bruit de vidéos sur son appareil. Mais ce n'est pas leur faute! Il est fort probable que l'application Web diffusant ces vidéos n'utilise pas le lecteur multimédia Telerik. Découvrez comment vous pouvez facilement créer une belle expérience multimédia pour vos utilisateurs.

Vous avez probablement dû trouver un moyen de permettre à vos employés de regarder les dernières émissions de la société sans interrompre leur quotidien, ou si votre application Web a quelque chose à ajouter. Faites avec les médias, montrez à vos visiteurs plusieurs vidéos à la fois. C'est assez simple une fois que vous avez placé un lecteur multimédia Teleik pour ASP.NET AJAX sur la page et que vous pouvez le jeter facilement dans un popup .

Vient maintenant la partie où vous ne devez pas ruiner l'UX, sinon vos utilisateurs vous maudiront.

"Mais comment, ce n'est qu'une vidéo", demandez-vous.
"C'est facile", dis-je – laissez simplement les utilisateurs faire visionner la vidéo quelque part, ils ne peuvent pas la voir, mais ils l'entendront

Oui, il y a le bouton muet sur l'onglet dans Chrome et Firefox, mais qu'en est-il de la téléphonie mobile? En outre, si cela ne fonctionne pas (cela ne fonctionne pas toujours pour les vidéos YouTube intégrées, du moins pour moi).

Alors, ne soyez pas ce type dont la page souffle du bruit dans les haut-parleurs du bureau adjacent ou depuis un téléphone dans le métro.

Vous devez simplement vous assurer que:

  • Si la fenêtre contextuelle n’est pas visible, la vidéo ne s'affiche pas.
  • L’utilisateur peut '

Pour le faire facilement, vous avez besoin d’une API riche à partir des contrôles que nous utilisons, comme ce que vous pouvez obtenir avec RadWindow et RadMediaPlayer.

Un aperçu de l'approche générique:

  1. Choisissez tout d'abord une vidéo. Voici un moyen simple d’en montrer un:

    </ telerik: RadMediaPlayer >

  2. À présent, placez-le dans un dialogue. En gros:

    < telerik: RadWindow runat = "serveur" ID = "RadWindow1" Titre = "Webinaire Kendo UI R3 2018" VisibleOnPageLoad = "true" AutoSize = "true" >

    >

    <1965 19659014] ContentTemplate >

    < telerik: RadMediaPlayer runat = "serveur" ID = "[RadmediaPlayer1" ] StartTime = "8" La lecture automatique = "false" Width = "600px" Hauteur = ] "350px" Source = " https://www.youtube.com/watch?v=UlzBZBWEXN4 " Titre = " Webinaire Kendo R3 2018 ">

    </ telerik: RadMediaPlayer >

    [19659036] </ ContentTemplate >

    </ telerik: RadWindow >

  3. Voici la partie dans laquelle vous devez accrocher des événements et attacher ces deux morceaux en fonction de leur API (la liste complète des codes avec les annotations est disponible ci-dessous):
    • Utilisez l'événement OnClientShow pour vous assurer que la vidéo reprend.
    • Utilisez l'événement OnClientClose pour suspendre la vidéo.
    • Définissez quelques propriétés dans la boîte de dialogue afin que l'utilisateur ne puisse pas le faire glisser hors de la fenêtre d'affichage, par exemple.
    • Ensuite, il y a un peu de la logique d’initialisation et des méthodes d’aide en raison des spécificités des commandes que j’ai décrites pour vous.

C’est facile lorsque les commandes vous fournissent toutes les méthodes et tous les événements dont vous avez besoin. Vous pouvez continuer sur cette lancée. Par exemple, veillez à ce que RadWindow reste toujours au même endroit dans la fenêtre en épinglant et en supprimant le comportement Épingler de vos utilisateurs car ils ne peuvent pas le désépingler eux-mêmes.

La plupart du code ici est des annotations. regardez la barre de défilement:

<asp: Button Text = "affichez-moi le webinaire" OnClientClick = "showWebinar (); return false;" ID = "Button1" runat = "serveur" />

<telerik: RadWindow runat = "serveur" ID = "RadWindow1" Titre = "Webinaire Kendo UI R3 2018" Comportements = "Déplacer, fermer, épingler" OnClientShow = "startPlayer"

OnClientClose = "pausePlayer"

OnClientBefore = (19659021) raiseFlag "

VisibleOnPageLoad = " true " = = - 19659021]" - 9999px "> >




Source link