Explication détaillée des problèmes et solutions audio et vidéo HTML5 mobiles

Récemment, nous étudions l'utilisation de la vidéo pour remplacer l'animation, ainsi que l'utilisation de la vidéo pour remplacer l'animation de sprites. Nous appelons ce type de vidéo vidéo interactive.

1. Un espace disque important, un téléchargement lent, en particulier la lecture en ligne, seront encore plus lents
2. Il y a trop de fichiers lors de la lecture en ligne, trop de requêtes http entraîneront une réponse lente ou un comportement anormal.

Il est donc urgent de développer un ensemble de technologies permettant de remplacer les animations de sprites par des vidéos. Nous appelons ce type de vidéo vidéo interactive

1. Les vidéos traditionnelles ne peuvent être lues que dans une zone carrée
2. Les vidéos traditionnelles sont lues dans une fenêtre sur l'iPad, mais sur l'iPhone, elles ne peuvent être lues qu'en plein écran.
3. Les vidéos traditionnelles apparaîtront certainement au premier plan lors de la lecture.

1. Sous iPhone, pas besoin de jouer en plein écran, on peut jouer dans une région
2. Les vidéos interactives peuvent apparaître sous des objets graphiques ordinaires
3. Les vidéos interactives peuvent être masquées, ce qui supprime l'arrière-plan de la vidéo et mélange la vidéo avec des objets graphiques ordinaires.

La recherche a initialement donné des résultats. D'ailleurs, je résumerai les problèmes pratiques rencontrés en audio et vidéo lors du développement du mobile H5 au cours des dernières années et donnerai mes propres solutions.

Jetez un œil à l'effet final réel : compatible avec PC (>IE9), iPhone, iPad, Android 5.0

Il résout les problèmes de manuel, d'automatique, de fenêtrage, etc. sur iPhone et peut essentiellement être utilisé dans la production réelle.

À droite se trouve le fichier vidéo mp4 original

La vidéo de gauche remplace l'animation et prend en charge l'effet de masque d'arrière-plan, qui peut révéler l'image de base et prendre en charge une série d'opérations interactives.

Chaque fois qu'un objet audio passe via un nouvel audio, vous pouvez voir qu'un nouveau fil sera généré sur IOS. C'est dégoûtant.

Solution : utilisez un nouvel objet Audio pour atteindre l'objectif de ne plus ouvrir de threads en remplaçant différentes adresses audio.

Solution : Le problème sur les versions inférieures d'Android n'est pas résolu. Généralement, dans le développement hybride, l'interface sous-jacente peut être ajustée, comme phonegap.

Solution : La lecture automatique sur iPhone est un processus effectué lors de la conception d'IOS. Il semble que ce soit pour empêcher le vol automatique de trafic.

Pour faire simple, il faut simuler l'utilisateur pour le déclencher manuellement, il faut donc appeler ce bout de code au début :

Cela vient de mon projet, je viens de le déduire.

 //Résout 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 le src lors de son utilisation. plat. isIOS) { var isAudio = false var fixaudio = function() { if (!isAudio) { isAudio = true Xut.fix.audio = new Audio(); document.removeEventListener('touchstart', fixaudio, false); document.addEventListener('touchstart', fixaudio, false);}

Si vous liez un tel code au corps : créez un objet audio via un déclenchement manuel, puis enregistrez-le dans le fichier global.

Lors de son utilisation, c'est comme suit

 //Si vous utilisez Xut.fix.audio pour spécifier l'initialisation src pour le navigateur iOS, voir app.jsif (Xut.fix.audio) { audio = Xut.fix.audio; audio.src = url;} else { audio = new Audio(url);}audio.autoplay = true;audio.play();

Remplacez simplement l'objet audio directement. Pour faire simple, s'il doit être créé automatiquement, il doit s'agir d'un objet déclenché par l'utilisateur pour être joué.

La balise vidéo peut être rarement utilisée sur les appareils mobiles. La prise en charge d'Android n'a été améliorée que dans la version 5.0.

Un vieux problème sur l'iPhone est qu'il ne peut pas jouer automatiquement (sauvegardez les données, sauvez votre sœur !!!), et la valeur par défaut est la lecture de contrôle en plein écran.

Pendant longtemps, j'ai ignoré ce traitement vidéo. Android utilise la couche inférieure et l'iPhone utilise directement VideoJS. Il a un flash intégré et la commutation h5 a également des problèmes de prise en charge.

Il y a quelque temps, mon patron a eu une demande : nous avons trop d'animations d'application, qui sont toutes des animations combinées d'itinéraires de sprites. Une application peut aller de plusieurs centaines de mégaoctets à des centaines de mégaoctets.

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 devenue très mature. La technologie de compression vidéo actuelle peut facilement compresser des films haute définition 720P à 10 M/minute ou 160 K/seconde. Elle est au moins des dizaines de fois plus petite que la taille du fichier de la séquence d'images. Dans le même temps, la plupart des appareils prennent en charge la décompression matérielle des vidéos. De cette manière, la consommation du processeur pour la lecture vidéo est très faible, la consommation de la batterie est également très faible et la vitesse de lecture est toujours rapide. Même la lecture en plein écran à 25 images peut être facilement réalisée.

Une fois le plan finalisé, quelques problèmes doivent être résolus.

1. La vidéo entière, y compris certains objets de la vidéo, peut répondre aux clics, diapositives et autres opérations de l'utilisateur.

2. Sous iPhone, vous pouvez jouer dans une fenêtre

3. Possibilité de filtrer l'arrière-plan afin qu'il puisse être utilisé comme une image PNG

L'effet final réel est également affiché dans l'animation gif de départ :

La vidéo remplace l'animation et prend en charge l'effet de masquage d'arrière-plan, qui peut révéler l'image de base.

Dans le même temps, cela a également résolu le problème du mode manuel, automatique et non plein écran.

Solution:

Traité via une combinaison de toile et de balise vidéo

Principe : récupérer l'image originale de la vidéo et la dessiner sur la page via Canavs

Ici, je joins directement le code source. Le code est généralement écrit, mais plusieurs points clés sont mis en évidence.

http://stackoverflow.com/questions/3699552/html5-inline-video-on-iphone-vs-ipad-browser

C'est un peu gênant. Vous devez interagir et faire glisser le canevas pour contrôler l'image. Je n'ai pas encore fini de tout écrire. Les besoins généraux de l'entreprise n'auront pas cela. Voici une description simple. vidéo, mais il en a besoin Il existe un conteneur de canevas en cache pour le prétraitement. Grâce au prétraitement, les pixels de chaque image sont obtenus en modifiant la valeur RBG de chaque pixel, l'arrière-plan peut être filtré, afin qu'il puisse être utilisé comme un PNG. image. Dans le futur C'est écrit, publions-le ~~

Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.