Comment détecter si le périphérique est un ordinateur de bureau et/ou mobile et si la connexion est wifi ou non avec AngularJS
J'ai effectué des recherches sur SO, mais les questions-réponses similaires permettent de détecter si une connexion est établie ou non, mais pas sur le type de connexion.
Le but de mon site Web est que, si un utilisateur est sur mobile (téléphone ou tablette) et en wifi, visionner un clip vidéo; si un utilisateur est sur mobile et non en wifi, lisez un clip vidéo; Si un utilisateur n'est pas sur le mobile, lisez le clip vidéo.
La raison de ce comportement différent est d'éviter d'éventuelles surcharges pour l'utilisateur en raison de la taille relativement plus grande du clip vidéo. Cela n’est pas lié à la vitesse - de nos jours, la différence de vitesse de LTE v.s. wifi peut-être que peu; c'est davantage pour le souci des utilisateurs de se faire facturer l'utilisation des données sans connexion wifi.
Ma question est donc la suivante: utiliser AngularJS (<2.0), 1) Comment détecter le périphérique comme étant un ordinateur de bureau ou mobile 2) Comment détecter le périphérique connecté au wifi ou non
(J'imagine que pour Q1, la solution de rechange consiste à utiliser Bootstrap @media, mais ce n'est pas idéal.)
Vous n'avez pas besoin de Angular pour faire un tel contrôle.
Afin de détecter si un appareil est un ordinateur de bureau ou un téléphone portable, utilisez navigator.userAgent, voir ceci answer
Afin de détecter le type de connexion, utilisez navigator.connection, voir ceci answer
Faites attention, cette API n'est pas universelle, voir ici .
Une autre façon de le faire est d’essayer ce plugin , qui repose sur le contrôle de vitesse sur Internet, mais je ne l’ai jamais utilisé.
Enfin, si vous VRAIMENT avez besoin de cette information pour les utilisateurs de smartphone, convertissez votre site Web sur Cordova , puis distribuez votre application.
Pour savoir si quel périphérique est utilisé, ce plug-in angular peut sauver quelques maux de tête: ngx-device-détecteur
installez-le: $ npm install ngx-device-detector --save, add au constructeur. Ensuite, appelez this.deviceService.IsMobile() par exemple pour vérifier si le type de périphérique est mobile. Il a d'autres méthodes pour vérifier si l'appareil est une tablette ou un ordinateur de bureau et d'autres méthodes qui renvoient des informations utiles sur le navigateur.
j'encourage les développeurs à utiliser la détection de fonctionnalités, et non la détection par navigateur ou bureau/mobile. Par exemple, modernizr dispose d'une fonction de détection des connexions à faible bande passante, même si elle ne fonctionne pas dans tous les navigateurs: https://modernizr.com/download#lowbandwidth-setclasses&q=connect
le danger, comme il est indiqué, est que les périphériques inconnus sont supposés être rapides.
pour avoir une idée du bureau par rapport au mobile, il existe une technique permettant d'écouter des événements tactiles. c.f.: Quel est le meilleur moyen de détecter un appareil à écran tactile en utilisant JavaScript?
pour savoir si vous devez lire automatiquement un clip vidéo, s'il s'agit d'un lecteur HTML5, il ne le jouera pas de toute façon sur mobile, pour les raisons que vous avez mentionnées, à moins que cela ne soit lié à un événement tactile (comme une lecture au toucher).
j'ai résolu ce problème en "enregistrant" un événement tactile précédemment, comme si je devais me rendre à l'écran avec le lecteur vidéo, puis réutiliser cet événement pour le lire automatiquement. Tout cela étant dit, veuillez vous demander si le jeu automatique est vraiment ce que vous voulez, car beaucoup d'utilisateurs le trouvent ennuyeux.