Récemment, nous étudions l'utilisation de la vidéo au lieu de l'animation et de la vidéo au lieu de l'animation sprite. Nous appelons ce type de vidéo vidéo interactive.
Animation de sprite traditionnelle: grand espace disque, téléchargement lent, en particulier la lecture en ligne, sera plus lent
Trop de fichiers, trop de requêtes http lors de la lecture en ligne, entraîneront une réponse lente ou un comportement anormal. Par conséquent, il est urgent de développer un ensemble de technologies pour remplacer l'animation de sprite par la vidéo. Nous appelons ce type de vidéo une vidéo interactive
Problèmes avec la vidéo traditionnelle:
1. Ne peut être joué que dans une zone de forme carrée
2. Sous l'iPad, c'est une fenêtre pour jouer, et sous l'iPhone, elle ne peut être jouée qu'en plein écran.
3. Lors de la lecture, il apparaîtra définitivement au premier plan
La vidéo interactive présente les caractéristiques suivantes:
Sous l'iPhone, la lecture plein écran n'est pas nécessaire, elle peut être lue dans une zone
La vidéo interactive peut apparaître sous des objets graphiques ordinaires
La vidéo interactive peut avoir un masque, de sorte que l'arrière-plan de la vidéo puisse être supprimé et que la vidéo et les objets graphiques ordinaires puissent être intégrés
Résumé : Pour la vidéo utilisée pour la lecture, nous la définirons comme une vidéo traditionnelle. Pour les vidéos qui doivent être utilisées à des fins spécifiques, nous les définissons comme des vidéos interactives. La recherche a donné des résultats préliminaires. Au passage, il résume les problèmes réels rencontrés dans le développement audio et vidéo du mobile H5 dans les prochaines années et apporte ses propres solutions. Jetez un œil à l'effet final réel : compatible avec PC (> IE9), iphone, ipad, Android 5.0
Résolvez les problèmes de fenêtrage manuel, automatique et de fenêtrage sur l'iPhone, et il peut essentiellement être utilisé dans la production réelle. Sur la droite se trouve le fichier vidéo mp4 d'origine, la vidéo sur la gauche remplace l'animation, puis prend en charge l'effet de masque d'arrière-plan, peut révéler la carte de base et prend en charge une série d'opérations interactives
Audio H5
Chaque fois qu'un objet audio passe par un nouvel audio, un nouveau thread peut être vu sur IOS.
Solution: un nouvel objet Audio, en remplaçant différentes adresses audio, atteint l'objectif de ne pas ouvrir plus de threads.
Le support n'est pas bon sur Android
Solution: le problème de la version inférieure d'Android n'est pas résolu. En règle générale, le développement mixte peut être géré en ajustant l'interface sous-jacente, telle que phonegap
Impossible de jouer automatiquement sur l'iPhone
Solution: la lecture automatique sur iPhone est un processus effectué lors de la conception de l'IOS. Il semble que ce soit pour empêcher le vol automatique de trafic.
En termes simples, il doit être déclenché manuellement en simulant l'utilisateur, nous devons donc appeler ce morceau de code au tout début:
Copier le code
// Corrige le problème selon lequel le navigateur ios ne peut pas lire automatiquement l'audio. Créez un nouvel audio lors du chargement et remplacez src lors de son utilisation.
Xut.fix = Xut.fix || {};
if (Xut.plat.isBrowser && Xut.plat.isIOS) {
var estAudio = faux
var fixaudio = function () {
if (! isAudio) {
isAudio = vrai;
Xut.fix.audio = nouvel audio ();
document.removeEventListener ('touchstart', fixaudio, false);
}
};
document.addEventListener ('touchstart', fixaudio, false);
}
Copiez le code ci-dessus
Si vous liez un tel code au corps: créez un objet audio en le déclenchant manuellement, puis enregistrez-le dans le fichier global
Lorsqu'il est utilisé comme suit:
Copier le code
// Si vous utilisez Xut.fix.audio pour spécifier src pour le navigateur iOS, veuillez vous référer à app.js pour l'initialisation
si (Xut.fix.audio) {
acoustique
=
Xut.fix.audio ;
audio.src = url ;
} Else {
audio = nouvel audio (url);
}
audio.autoplay = vrai;
audio.play ();
Remplacez simplement l'objet audio. En termes simples, il doit s'agir de l'objet créé par le déclencheur utilisateur pour jouer.
Audio vidéo H5
Les balises vidéo peuvent être rarement utilisées sur le terminal mobile, le support Android est dommage, visuellement 5.0 est meilleur. L'ancien problème sur l'iPhone ne peut pas être lu automatiquement (Enregistrer les données, enregistrer votre sœur !!!), et la valeur par défaut est le contrôle en plein écran pour jouer. Pendant longtemps, j'ai ignoré ce traitement vidéo. Android utilise la couche inférieure, l'iPhone utilise directement VideoJS, le flash intégré et le commutateur h5, le flash a également des problèmes de support. Il y a quelque temps, le patron avait une demande. Nous avons appliqué trop d'animations, toutes étaient des animations combinées d'itinéraires de sprites, allant de centaines de mégaoctets à des centaines de mégaoctets sous une seule application, il y a donc un besoin urgent d'une solution pour compresser les images. La solution finale consiste à utiliser la vidéo au lieu de l'animation, car la technologie de compression vidéo est développée depuis de nombreuses années et est très mature. Désormais, la technologie de compression vidéo peut facilement convertir le 720P. Films haute définition, compressés à 10 M / min ou 160 K / s. La taille du fichier de la séquence d'images est au moins plusieurs dizaines de fois plus petite. Dans le même temps, la plupart des appareils prennent en charge la décompression matérielle de la vidéo, de sorte que la consommation du processeur de la lecture vidéo est très faible, la consommation de la batterie est également très faible et la vitesse de lecture est également rapide. Même la lecture plein écran de 25 images peut être facilement réalisée.
Le plan est finalisé et plusieurs problèmes à résoudre se trouvent ici.
La vidéo entière, y compris certains objets de la vidéo, peut répondre aux clics de l'utilisateur, aux diapositives et à d'autres opérations sous l'iPhone, peut être lue dans une fenêtre, peut filtrer l'arrière-plan et peut être utilisée comme une image PNG. La vidéo remplace l'animation, puis prend en charge l'effet de masque d'arrière-plan, qui peut révéler l'image de base, et résout également le problème de l'écran manuel, automatique et incomplet
fenêtrage iphone
Solution: combinez le traitement via canevas + balises vidéo
Principe: Obtenez l'image originale de la vidéo et dessinez-la sur la page via canavs
Ici j'attache directement le code source, le code est écrit en général, mais met en évidence quelques points clés
http://iwearshorts.com/blog/inline-video-on-the-iphone/
http://stackoverflow.com/questions/3699552/html5-inline-video-on-iphone-vs-ipad-browser
Vidéo au lieu d'animation
C'est un peu encombrant. Il doit être interactif et faire glisser le canevas pour atteindre l'objectif de contrôler l'image. Je n'ai pas encore fini de tout écrire, et les besoins généraux de l'entreprise ne le seront pas. Voici une brève description, elle est également traitée par canvas + video, mais un container canvas mis en cache est nécessaire pour faire un prétraitement. Grâce au prétraitement, obtenez les pixels de chaque image et en changeant la valeur de chaque pixel RBG, il peut filtrer l'arrière-plan, afin qu'il puisse être utilisé comme une image PNG. Je l'écrirai plus tard et le publierai ~~
Notre autre produit:
