wechatVideoExample
1.0.0
Testez le code source pour lire des vidéos sur WeChat : étant donné que WeChat utilise le navigateur X5, divers problèmes étranges surviennent lors de l'utilisation de la balise vidéo pour lire des vidéos. Ce code source est un code source provisoire créé dans le cadre du processus de résolution de ce problème. Il comprend divers cas de test : utilisation de canevas pour lire des vidéos, utilisation d'images pour lire des vidéos, utilisation de balises x5, etc. Cette bibliothèque de codes sources disponible peut être conservée et les étudiants intéressés peuvent la télécharger eux-mêmes.
###Après avoir téléchargé l'introduction, créez un nouveau répertoire sur l'hôte et copiez tout le code source dans ce répertoire. Utilisez le navigateur WeChat pour accéder à la page HTML à l'intérieur pour tester.
Auteur chenjsh36 Équipe technologique Ant Financial Data Experience
Avec l'avènement de l'ère du trafic et l'amélioration de la technologie matérielle, de plus en plus de sites Web espèrent lire leurs propres vidéos sur PC ou terminaux mobiles. L'amélioration progressive de la compatibilité de <video> rend les développeurs plus disposés à l'utiliser. scénarios de lecture.
Cet article répertorie principalement les scénarios courants de lecture vidéo et les pièges rencontrés dans chaque scénario. Nous espérons qu'il pourra aider les développeurs à choisir plus rapidement les solutions techniques appropriées et à réduire les pièges face à l'évolution de la demande__.
Attribut booléen autoPlay ; lorsqu'il est spécifié, la vidéo commencera automatiquement à jouer immédiatement et n'arrêtera pas d'attendre que les données soient chargées.
La lecture automatique de la vidéo peut lire automatiquement la vidéo lorsque la page est ouverte et que les ressources sont suffisamment chargées, réduisant ainsi l'interaction d'un clic de l'utilisateur. Elle peut également être appliquée aux arrière-plans dynamiques et aux fonctions d'appel vidéo d'imitation H5. Cependant, pour diverses raisons, la lecture automatique présente différents degrés de restrictions, tant sur PC que sur terminaux mobiles.
Au début, une balise vidéo gestuelle de l'utilisateur était requise pour la lecture ; à partir de la version 10 , les règles vidéo ont été modifiées et Apple a assoupli la lecture en ligne et automatique . La stratégie est la suivante (applicable uniquement au navigateur Safari) :
<video> seront autorisés à être autoplay sans un geste de l'utilisateur si leur média source ne contient aucune piste audio (les éléments vidéo sans sources audio autorisent la lecture automatique).<video muted> seront également autorisés à être lus automatiquement sans un geste de l'utilisateur.<video> obtient une piste audio ou n'est plus mis en sourdine sans un geste de l'utilisateur, la lecture sera interrompue.<video autoplay> ne commenceront à jouer que lorsqu'ils seront visibles à l'écran, par exemple lorsqu'ils défileront dans la fenêtre, rendus visibles via CSS et insérés dans le DOM (les éléments vidéo ne commenceront à jouer que lorsqu'ils seront visibles à l'écran).<video autoplay> s'arrêteront s'ils deviennent non visibles, par exemple s'ils défilent hors de la fenêtre. __Early__ exigeait également des gestes de l'utilisateur pour jouer ; Chrome 53 d'Android a ensuite assoupli la politique de lecture automatique. La politique est différente de Safari d'iOS. Il est nécessaire de définir simultanément la lecture automatique et la mise en sourdine (si le son est coupé) pour autoriser la lecture automatique. la lecture ; FireFox et UC Browser__ d'Android prennent en charge la lecture automatique dans toutes les circonstances ; la situation avec les autres navigateurs Android n'est actuellement pas claire ;
Au début, la lecture automatique était prise en charge, mais récemment, Safari et Chrome ont successivement modifié leurs stratégies de lecture automatique...
__Safari 10 et versions ultérieures__La vidéo et l'audio avec audio sont désactivés par défaut lors de la lecture automatique . Pour plus d'informations, veuillez vous référer à cet article ;
Lecture automatique sous Chrome (ancienne version) :
Safari (post 10) ne fonctionne pas automatiquement :
Les vidéos avec un son coupé peuvent toujours être lues. Les vidéos avec du son seront automatiquement lues en fonction de l'__Media Participation Index__. Alors, qu'est-ce que l'Indice de participation des médias ? L'explication officielle et les dimensions associées sont données :
MEI est un indice qui évalue la participation médiatique de l'utilisateur sur le site actuel. Il dépend des dimensions suivantes :
- L'utilisateur est resté sur le média pendant plus de 7 secondes
- L'audio doit être affiché et non coupé
- Interagi avec la vidéo
- La taille du média ne doit pas être inférieure à 200x140.
Après avoir lu ceci, les réflexions du développeur sont les suivantes :
Heureusement, Safari et Chrome, tout en limitant la lecture automatique, fournissent un mécanisme permettant de détecter si la vidéo peut être lue automatiquement, afin que les développeurs puissent disposer d'alternatives lorsqu'ils constatent que la lecture automatique ne peut pas avoir lieu :
var promise = document.querySelector('video').play();
if (promise !== undefined) {
promise.catch(error => {
// Auto-play was prevented
// Show a UI element to let the user manually start playback
}).then(() => {
// Auto-play started
});
}
parce qu'il peut être perturbateur, gourmand en données et que de nombreux utilisateurs ne l'aiment pas . (Parce qu'il peut être perturbateur, gourmand en données et que de nombreux utilisateurs ne l'aiment pas.)
J'ai constaté que le H5 qui joue automatiquement peut souvent être vu sur WeChat. Cependant, l'exemple de lecture vidéo écrit par l'auteur avec lecture automatique et lecture en ligne ne peut toujours pas être lu automatiquement sur WeChat, mais il peut être lu automatiquement sur DingTalk.
| Navigateur système | avec du son | sans son |
|---|---|---|
| IOS DingTalk | soutien | soutien |
| Safari sur iOS | interdire | Lecture automatique |
| IOS WeChat | interdire | interdire |
En interrogeant les informations, le développement de l'IOS WebAPP est basé sur le noyau du navigateur fourni par IOS , de sorte que les performances de lecture automatique peuvent être modifiées dans la vue Web de WebAPP. DingTalk prend évidemment en charge la lecture automatique, tandis que WeChat interdit la lecture automatique, mais fournit une fonction intégrée. événements pour prendre en charge la lecture automatique :
Lecture automatique via l'événement WeixinJSBridgeReady sous WeChat :
document . addEventListener (
'WeixinJSBridgeReady' ,
function ( ) {
video . play ( ) ;
} ,
false
) ; Dans les navigateurs mobiles, lorsque l'utilisateur clique pour lire ou déclenche la lecture via l'API video.play(), la vidéo sera forcée d'être lue en plein écran par-dessus. L'intention initiale de la conception peut être que le plein écran puisse fournir un affichage. meilleure expérience utilisateur, mais il existe parfois des développeurs qui souhaitent pouvoir contrôler s'ils doivent passer en plein écran pour répondre à d'autres besoins.
Si vous souhaitez obtenir une lecture non plein écran, ajoutez simplement l'attribut Playsinline à la balise vidéo. Cet attribut ne pose pratiquement aucun problème dans les navigateurs mobiles basés sur le noyau Webkit. Si cela ne fonctionne pas, ajoutez simplement webkit-playsinline :
< video
src = {videoUrl}
webkit-playsinline =" true "
playsinline =" true "
/>Alors, comment gérer les navigateurs dotés d’autres noyaux ? À l’heure actuelle, vous devez comprendre quels navigateurs existent actuellement sur le marché.
Tout d’abord, vous devez connaître les quatre cœurs de navigateur actuels dans le monde :
dans:
Les navigateurs PC nationaux courants tels que UC Browser, QQ Browser, Baidu Mobile Browser, 360 Secure Browser, Google Chrome, Sogou Mobile Browser, Cheetah Browser et mobile UC, QQ, Baidu et d'autres navigateurs mobiles ont des noyaux modifiés essentiellement sur la base de Webkit. , on peut penser que les mobinautes du marché utilisent essentiellement des noyaux webkit ou des navigateurs modifiés à partir du noyau webkit, donc la compatibilité de playinline est très bonne !
L'élément vidéo fournit plusieurs événements comportementaux permettant aux développeurs de contrôler la lecture vidéo. Ceux qui ont une bonne compatibilité incluent onended , __ontimeupdate, onplay, onplaying, etc. __Certains événements se comportent de manière incohérente sur différents navigateurs et différents appareils.
Par exemple : la surveillance de ' canplay ' sous iOS (si suffisamment de données ont été mises en mémoire tampon pour une lecture fluide) ne sera pas déclenchée lors du chargement, même si __preload="auto" __ est inutile, mais dans le débogueur Chrome sur PC Next, ce sera le cas. déclenché pendant la phase de chargement. iOS doit être joué avant qu'il ne soit déclenché.
Chargement terminé :
Cliquez pour jouer :
Chargement terminé :
Cliquez pour jouer
Chargement terminé :
Cliquez pour jouer :
Certains événements ont des caractéristiques d'affichage incohérentes selon les différents systèmes, appareils et navigateurs, soyez donc prudent lorsque vous les utilisez.
Avec des contrôles ajoutés à cet attribut, Gecko fournira des contrôles utilisateur, permettant aux utilisateurs de contrôler la lecture vidéo, y compris le volume, le passage d'images et la pause/reprise de la lecture.
L'attribut contrôles spécifie que le navigateur doit fournir des contrôles de lecture pour la vidéo, sinon les contrôles de lecture seront masqués, afin que les développeurs puissent personnaliser leurs propres contrôles de lecture. Le masquage des commandes de lecture est bien compatible sur les terminaux mobiles PC et IOS. Cependant, le masquage des commandes n'est pas pris en charge sur les terminaux mobiles Android, mais il peut toujours être réalisé via certaines méthodes.
La méthode la plus compliquée consiste à agrandir la vidéo et à déplacer la barre de contrôle hors du champ de vision pour obtenir l'effet caché ! En fait, l'élément vidéo est rendu plus grand que le conteneur parent, de sorte que la barre de contrôle inférieure soit à l'extérieur du conteneur parent, puis le conteneur parent est défini sur : overflow : caché, une méthode pour masquer les contrôles de lecture ! L'inconvénient est que la vidéo sera agrandie et que vous devrez laisser un espace vide à l'avance pour l'agrandir.
L'équipe du noyau x5 de l'équipe Android de Tencent a assoupli les restrictions sur la lecture vidéo. Les vidéos n'appellent pas nécessairement leur lecteur vidéo très critiqué. Elles utilisent l' attribut __x5-video-player-type="h5" pour masquer les éléments de contrôle et en même temps. en même temps __La vidéo n'est plus au-dessus, permettant à d'autres éléments de flotter au-dessus .
Après avoir compris les scénarios courants et les pièges courants de la lecture vidéo, nous pouvons améliorer l'expérience utilisateur en fournissant des solutions correspondantes pour différents scénarios. Par exemple, la page H5 qui joue automatiquement sur le terminal mobile peut déclencher indirectement la lecture vidéo en guidant les utilisateurs à cliquer ou à glisser. C'est l'approche la plus conservatrice, pas de bugs ! Une meilleure solution consiste à lire automatiquement par défaut et à capturer la situation dans laquelle la lecture est interdite, puis à guider l'utilisateur dans ses interactions pour réaliser la lecture vidéo.
utiliser la vidéo Au début, la lecture vidéo était sévèrement limitée sur le terminal mobile car elle impliquait une consommation de performances élevée, une consommation de trafic élevée et des considérations d'expérience utilisateur. Cependant, avec l'amélioration des performances du téléphone mobile, l'avènement de l'ère du trafic et une scène plus forte. exigences, les restrictions ont été progressivement assouplies, tandis que le côté PC a progressivement Progressivement, de la « génération lâche » à la « génération serrée », les deux mettent constamment à jour leurs stratégies dans le but d'offrir aux utilisateurs une meilleure expérience. À l'avenir, elles pourraient s'unifier et les développeurs pourraient partir de l'adaptation de compatibilité sous-jacente. . Libérez-le pour avoir plus d’énergie pour effectuer un travail de niveau supérieur.
Si vous êtes intéressé par notre équipe, vous pouvez suivre la chronique, suivre github ou envoyer votre CV à 'tao.qit####alibaba-inc.com'.replace('####', '@'). Toute personne ayant de nobles idéaux est bienvenue à rejoindre ~
Adresse d'origine : https://github.com/ProtoTeam/blog/blob/master/201806/1.md
