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

Récemment, nous étudions l'utilisation de vidéos pour remplacer les animations et l'utilisation de vidéos pour remplacer les animations de sprites. Nous appelons ce type de vidéos des vidéos interactives.

Animation de sprite traditionnelle :

• Un espace disque important et un téléchargement lent, en particulier la lecture en ligne, seront encore plus lents

• 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

Par conséquent, il est urgent de développer un ensemble. de technologies pour utiliser la vidéo au lieu de l'animation de sprites. Nous appelons ce type de vidéo vidéo interactive

Problèmes avec la vidéo traditionnelle :

• La vidéo traditionnelle ne peut être lue que dans une zone carrée

• Les vidéos traditionnelles sont lues dans Windows sur iPad, mais sur iPhone, elles ne peuvent être lues qu'en plein écran

• Les vidéos traditionnelles apparaîtront certainement lors de la lecture au début

• 
  

La vidéo interactive présente les caractéristiques suivantes :

• Sous l'iPhone, il n'est pas nécessaire de jouer en plein écran, elle peut être lue dans une zone

• La vidéo interactive peut apparaître sous des graphiques ordinaires objets

• Les vidéos interactives peuvent avoir des masques, qui peuvent supprimer l'arrière-plan de la vidéo et intégrer la vidéo avec des objets graphiques ordinaires

Résumé : Pour vidéos qui sont simplement utilisées pour la lecture, nous les définirons sur des vidéos traditionnelles. Pour les vidéos devant être utilisées à des fins spécifiques, nous les définissons comme vidéos interactives.

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

Regardez l'effet réel final : compatible avec PC (>IE9), iPhone, iPad, Android 5.0

Il résout les problèmes de manuel, automatique, fenêtrage, etc. sur iPhone , et peut essentiellement être utilisé Produit réellement

Le côté droit est le fichier vidéo mp4 original

La vidéo de gauche remplace l'animation, puis prend en charge l'effet de masque de fond, peut révéler la base carte, et prend en charge une série d'opérations interactives

Audio audio H5

• Un audio l'objet est transmis à chaque fois via un nouvel audio, visible sur IOS. Un nouveau fil de discussion sera généré, ce qui est dégoûtant

Solution :

nouvel objet Audio, en remplaçant différentes adresses audio, atteint l'objectif de ne pas ouvrir plus de fils

• Support insuffisant sur Android

Solution :

Le problème sur les versions inférieures d'Android n'a pas été résolu. Généralement, le développement hybride peut être géré en ajustant l'

interface sous-jacente. Par exemple, phonegap <.>

ne peut pas être utilisé automatiquement sur iPhone Play

Solution :

La lecture automatique sur iPhone est un processus effectué. lorsque IOS a été conçu, cela semble être pour empêcher le vol automatique de trafic

Pour faire simple, vous devez simuler l'utilisateur pour le déclencher manuellement

Nous devons donc appeler. ce morceau de code au début :

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

Supposons qu'un tel code soit lié au corps : créez un objet audio via manuel déclenchement, puis enregistrez-le dans le global

//修复ios 浏览器不能自动播放音频的问题 在加载时创建新的audio 用的时候更换src即可
Xut.fix = Xut.fix||{};
if (Xut.plat.isBrowser && Xut.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);
}

Lorsqu'il est utilisé, c'est comme suit

Vous pouvez remplacer directement l'objet audio Pour faire simple, l'objet créé par l'utilisateur. doit être déclenché automatiquement pour lire

//如果为ios browser 用Xut.fix.audio 指定src 初始化见app.js
if (Xut.fix.audio) {
    audio 
=
 Xut.fix.audio;
    audio.src = url;
} else {
    audio = new Audio(url);
}
audio.autoplay = true;
audio.play();

L'audio vidéo H5

Les balises vidéo peuvent être rarement utilisées sur les appareils mobiles. La prise en charge d'Android est terrible. 🎜>

Un vieux problème sur iPhone, 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é cela le traitement vidéo. Android utilise la couche inférieure, l'iPhone utilise directement VideoJS, le flash intégré et la commutation h5, le flash a également des problèmes de support

Le patron a eu une demande il y a quelque temps. Ils ont trop d'animations d'application. sont toutes des animations combinées d'itinéraires de sprites. Une application peut aller de centaines de mégaoctets à des centaines de mégaoctets

Il y a donc un besoin urgent d'une solution pour la compresser

Images

<.>La solution finale consiste à utiliser la vidéo au lieu de l'animation, car la technologie de compression vidéo a été 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 7Explication détaillée des problèmes et solutions audio et vidéo mobiles HTML50P

à 10 M/minute ou 160K/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 rapide. Même la lecture en plein écran à Explication détaillée des problèmes et solutions audio et vidéo mobiles HTML55 images peut être facilement réalisée

.

Une fois le plan finalisé, plusieurs 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 et aux diapositives de l'utilisateur. Opérations de classe

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

3. Peut filtrer l'arrière-plan pour qu'il puisse être utilisé comme un PNG image

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

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

En même temps, cela résout également le problème du fenêtrage manuel, automatique et non plein écran

fenêtrage de l'iphone

Solution :

viacanvas Traitement combiné avec des balises vidéo

Principe : Récupérez l'image originale de la vidéo et dessinez-la sur la page via canavs

La vidéo remplace l'animation

C'est un peu gênant. Cela nécessite une interaction et un déplacement du canevas pour contrôler l'image. Je n'ai pas encore fini de tout écrire. , et les besoins généraux de l'entreprise n'auront pas cela

Voici une brève description, elle est également traitée par toile vidéo, mais un conteneur de toile en cache est requis pour le prétraitement

Grâce au prétraitement, chaque vidéo est obtenue. En modifiant la valeur RBG de chaque pixel, les pixels de l'image peuvent filtrer l'arrière-plan,

et peuvent être utilisés comme Images PNG

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!