Récemment, nous avons recueilli la face avant 50 de la plus exceptionnelle H5.
Que mon côté, selon la technologie de classification afin d'identifier dix cas représentatifs pour tout le monde pour résoudre ce qu'ils implémentations de la technologie.
Les concepteurs peuvent également être basés sur la technologie en tant que matériau de référence que vous fournissez
Parce que je présente principalement le classement technique, donc il suffit de prendre le cas des technologies différentes, avec différents styles de conception pour obtenir une technique que je ne vais pas énumérer.
Première mention peu, qui contient la technologie est divisé en: la lecture CreateJS / thresjs / vidéo en ligne /
D'abord, il d'abord, avant père Tencent Tencent a produit l'animation de la propagande d'un APP H5, H5 Cela se fait par l'équipe de Tencent TGideas
Ce qui suit est la description officielle de TGideas
TGideas appartient à Tencent systèmes d'entreprise de divertissement interactif, est une mise au point sur les opérations et le marketing dans le domaine de l'équipe de conception de l'expérience utilisateur, la portée des travaux impliqués dans l'emballage des produits, la publicité créative, la construction de la marque, le design interactif, une équipe de planification professionnelle, gestion de projet, créatif , la vision, le développement, la constitution de talents multimédia. « Le travail dur, jouer dur » est notre credo que les avions gagnant est délivré, nous sommes plus disposés à travailler à travers la diversification, les produits et d'aider les utilisateurs à mettre en place un mécanisme efficace de communication et des liens émotionnels, la valeur commerciale de réaliser dans le vrai sens.
OK, ici il vient TGideas sur la façon de nous parler d'une autre équipe de Tencent appelé ISUX, ces deux équipes est H5 ce domaine est relativement bonne Tencent deux équipes que j'ai appris, la composition de leur équipe de conception aussi + l'avant
Tencent conception de l' expérience utilisateur social, appelé ISUX (Internet Social User Experience), établie en Janvier 11, 2011, est le noyau du groupe Tencent, la plus grande équipe de conception UX du monde, les membres professionnels comprennent la recherche de l' utilisateur, la conception d'interaction, conception visuelle, la conception de la marque, la conception d'animation vidéo, le développement interface utilisateur, la conception des produits et des études de marché, a ISUX situé au siège de Shenzhen en Chine à Beijing, Shanghai, Chengdu et Séoul, en Corée.
ISUX responsable des produits de communication sociale et divertissement conception de l' expérience utilisateur et de la recherche Tencent et services, y compris les principales plates - formes de services , tels que QQ, l' espace QQ, les membres QQ, porte - monnaie QQ, sports QQ, Tencent nuage, les entreprises Tencent points, les choses QQ ensemble, classe Tencent tribu d'intérêt, modèle direct, K chanson universelle, l' acteur universel, pingouins FM, café flash, chaque image P, et un appel comme un micro nuage.
Les deux sont relativement bonnes à la sortie des deux équipes ont H5 contacté
cas de vidéo +
OK, puis balayer le look de code à deux dimensions au premier cas.
D'un usage technique, cette page utilise le contrôle de script javascript sur la vidéo.
Le principal problème à résoudre est
Ajouter la vidéo dans le navigateur par défaut et puis il y a une barre de contrôle en plein écran
Il y a des micro-canaux forcée navigateur Android problème plein écran
Solution Dans l'IOS:
canal de navigateur Micro peut augmenter un attribut en ligne, de sorte que le lien vidéo sans jeu en pleine page d'écran.
Mais fin Andrews si nécessaire d'utiliser cette propriété, nous avons besoin d'utiliser dans le navigateur whitelist.
Mais micro-canal navigateur X5 ne fournit pas l'application officielle d'entrée whitelist.
Nous ne pouvons donc mettre une autre façon d'y parvenir
TBS kernel version ultérieure (> = 036 849) du navigateur X5,
Quelque chose a appelé une couche de support avec le joueur, la fin du canal micro peut Andrews dans le cas de la vidéo plein écran pour ajouter une couche de quelque chose sur la vidéo
<video preload="load" data-link="http://wag.i-h5.cn/dj/wyf/video/wb.mp4" playsinline x-webkit-airplay="true" webkit-playsinline
x5-video-player-type="h5" x5-video-player-fullscreen="true" id="video" width="100%" src="http://wag.i-h5.cn/dj/wyf/video/wyf.mp4"></video>
Ainsi, en fonction de la vidéo ci-dessus, plus plein écran faire quelque chose pour faire quelque chose?
Puis balayer ce cas.
Tel est le cas, je suis à la recherche d'un outil interactif et combiné vidéo, plus cette interaction, vos différentes options sont différentes pour un clip vidéo, pas d'autre choix est également un clip vidéo, par le même lecteur couche + lecteur vient de présenter en ligne mode peut être atteint.
Une analyse spécifique peut se référer aux liens suivants:
HTTPS: //segmentfault.com/a/11 ...
Bien sûr, sans s'y limiter à cette vidéo après le tournage d' un clip vidéo, réalisée par AE peut également être combiné avec une sortie vidéo interactive de quelque chose, ne pas le répéter ici, par exemple. Ensuite , regardez à l'utilisation d'un Three.js WebGL à voir avec le dernier jour du carnaval un chat similaire H5.
Un peu plus au sujet de
WebGL（全写Web Graphics Library）是一种3D绘图标准
WebGL可以为HTML5 Canvas提供硬件3D加速渲染
threejs est encapsulées WebGL bibliothèques tierces peuvent être utilisés pour développer un certain nombre de choses liées à l'affichage 3D
......
alors le téléphone d' Apple se trouve dans tout le monde à utiliser, point de vue et peut couper très belle vue du contrôle de vitesse peut également contrôler le dans le téléphone d' Apple avant et en arrière.
Dans ce cas, l'utilisation d'un IOS 3D est un miroir à la fin pour obtenir l'effet de threeJs
Andrews est l'utilisation finale de la vidéo.
Après je fais des changements à la ligne de code, l'utilisation obligatoire de WebGL cette page dans le terminal Android à l'affichage trouve dans la diffusion directement après un navigateur micro-canal crash.
Pour enquêter sur la cause du problème, il peut être deux
D'une part , est le
asynchrone concurrent demande une ressource que le navigateur dans une impasse
si une ressource est demandée lorsque plusieurs requêtes asynchrones en même temps pourrait amener le navigateur à une impasse, une impasse est le résultat d'un accident du navigateur. Le navigateur par défaut est activé cache, alors que le navigateur lorsque les données de lecture à partir du cache seront verrouillés.
Nous avons besoin des mêmes ressources ne peuvent pas se produire lorsque l'organisation de la file d' attente de requête asynchrone dans différentes files d' attente
Sur l'autre navigateur X5 main pour les téléphones Android lui-même soutien est incertain, à différentes machines différentes valeurs d'Android sont différents, et certains ne peuvent même jouer la machine, qui peut être considéré comme navigateur X5 propre fosse.
Case threeJS
regard à un cas
Ceci est une autre performance threejs en termes de 3D H5
panorama 3D, bien sûr, pour réaliser ce type de H5 plus threejs.
Panoramique, il y a deux autres programmes doivent acheter des logiciels pour faire, pas dans les détails ici.
Je suis donc ici pour fournir une Three.js panoramique réalisée en utilisant des tutoriels 3D
https://isux.tencent.com/3d.html
Une autre utilisation de threeJs
Faire de l'animation des particules 3d
Ce cas threejs obtenir des performances sur les performances de la machine optimisée Android est également bon
CreateJS cas
Un peu plus, CreateJS est un moteur de jeu léger qui peut être utilisé pour développer des jeux.
Il a l'avantage
animateCC Adobe animation d'édition visuelle directe, peut être lié aux os, le code peut également être inséré directement dans le logiciel.
Vous pouvez alors DERIVENT fournir CreateJS le code js base
Lorsque la mise en œuvre H5, le programmeur peut avoir besoin d'examiner les détails des effets d'animation et d' animation. Le film de votre choix à faire par le concepteur, le programmeur à se joindre à bout nécessaire pour développer l'exportation.
Alors que le temps de développement, de réduire les coûts de communication.
Regardez le cas suivant
Ce cas est le code d'animation généré par le animateCC. couche Mongolie sur la toile, puis ajoutée par le programmeur, les effets interactifs de développement. Parce que CreateJS est un moteur de jeu, il peut faire des jeux comme celui - ci. Le jeu est simple, mais très efficaces pour promouvoir le thème de ses restaurants hot pot. Avec CreateJS peut également accélérer la vitesse de développement.
Comme il est indiqué ci-dessus contient uniquement des transitions et des animations H5 directement avec animateCC faire un bon film.
Modifiez le fichier source fla par le développeur, en ajoutant des extraits si nécessaire.
Lecture et pause peuvent être réalisés ainsi que la trame de commande de trame, le logiciel peut être une clé dérivée largeur adaptatif d'extrémité mobile et l'animation de hauteur directement.
Ce qui suit est relativement nouveau H5 mais pas très commun, double interactive H5
Eh bien le dernier qui est un panorama vidéo + H5 à faire, mais ce panorama ne pas utiliser threejs
Mais l'utilisation d'un autre, appelé krano, cela a été mentionné avant un besoin commercial à payer pour un logiciel.
L'analyse de ces dix cas, il serait fini, je vous remercie.