FMUSER Wirless transmet la vidéo et l'audio plus facilement!
es.fmuser.org
it.fmuser.org
fr.fmuser.org
de.fmuser.org
af.fmuser.org -> Afrikaans
sq.fmuser.org -> albanais
ar.fmuser.org -> arabe
hy.fmuser.org -> Armenian
az.fmuser.org -> azerbaïdjanais
eu.fmuser.org -> basque
be.fmuser.org -> biélorusse
bg.fmuser.org -> Bulgare
ca.fmuser.org -> catalan
zh-CN.fmuser.org -> chinois (simplifié)
zh-TW.fmuser.org -> Chinois (traditionnel)
hr.fmuser.org -> croate
cs.fmuser.org -> tchèque
da.fmuser.org -> danois
nl.fmuser.org -> Néerlandais
et.fmuser.org -> estonien
tl.fmuser.org -> Philippin
fi.fmuser.org -> finnois
fr.fmuser.org -> Français
gl.fmuser.org -> Galicien
ka.fmuser.org -> géorgien
de.fmuser.org -> allemand
el.fmuser.org -> Grec
ht.fmuser.org -> Créole haïtien
iw.fmuser.org -> hébreu
hi.fmuser.org -> Hindi
hu.fmuser.org -> Hongrois
is.fmuser.org -> islandais
id.fmuser.org -> indonésien
ga.fmuser.org -> irlandais
it.fmuser.org -> Italien
ja.fmuser.org -> japonais
ko.fmuser.org -> coréen
lv.fmuser.org -> letton
lt.fmuser.org -> Lituanien
mk.fmuser.org -> macédonien
ms.fmuser.org -> malais
mt.fmuser.org -> maltais
no.fmuser.org -> Norwegian
fa.fmuser.org -> persan
pl.fmuser.org -> polonais
pt.fmuser.org -> portugais
ro.fmuser.org -> Roumain
ru.fmuser.org -> russe
sr.fmuser.org -> serbe
sk.fmuser.org -> slovaque
sl.fmuser.org -> Slovène
es.fmuser.org -> espagnol
sw.fmuser.org -> Swahili
sv.fmuser.org -> suédois
th.fmuser.org -> Thai
tr.fmuser.org -> turc
uk.fmuser.org -> ukrainien
ur.fmuser.org -> ourdou
vi.fmuser.org -> Vietnamienne
cy.fmuser.org -> Gallois
yi.fmuser.org -> Yiddish
1. L'idée de conception du lecteur h5
Ces fonctions doivent être incluses après reconstruction: prise en charge de la diffusion à la demande (MP4 non crypté) et en direct (m3u8), compatible (adapté) aux terminaux mobiles, et sélection automatique (utiliser flash ou h5) en fonction de la plateforme.
En termes de frameworks et de bibliothèques, nous choisissons toujours d'utiliser principalement le framework nej, nej fournit une multitude de méthodes. Les classes qui sont exposées au monde extérieur sont implémentées en utilisant regular, car la plupart des composants frontaux et des projets commerciaux des produits éducatifs utilisent regular, ce qui est très pratique à utiliser. De plus, la solution flexible est sélectionnée sur le terminal mobile, car l'adaptation de page Web des produits éducatifs a été unifiée à l'aide de flexible, et la gestion des événements gestuels est sélectionnée.
Afin de faciliter l'expansion et l'ajout de composants, le mode observateur est utilisé. Le mode observateur est très adapté à une utilisation dans un projet de la taille d'un lecteur vidéo, et c'est aussi un mode de conception qui a fait ses preuves. Je me suis directement référé à l'implémentation similaire dans flex, et je l'ai réécrit en utilisant js (bien sûr, je l'ai écrit très rapidement).
Comme le montre la figure ci-dessus, la classe de base du composant et la classe singleton componentContainer implémentent le modèle d'observateur. Tous les composants sont hérités de la classe de composants. Dans l'instance de composant, des méthodes peuvent être appelées pour envoyer des objets de notification pour la communication entre les composants. La planification des notifications se trouve dans le componentContainer. Atteint. Ces composants sont divisés en composants obligatoires et en composants optionnels. Les composants nécessaires comprennent: le composant objet vidéo (movieData), le composant de lecture vidéo (mainVideo), le composant api, etc. Les composants optionnels sont développés en fonction des exigences commerciales de différents produits, qui peuvent être développés grâce à la configuration de différentes listes de composants personnalise les fonctions spécifiques du lecteur, qui sont également implémentées dans componentContainer. Html5VideoMedia est une encapsulation de HTMLVideoElement. Il n'est pas utilisé en tant que composant, mais fournit uniquement des fonctions de lecture vidéo et définit les événements associés. En plus des composants de lecture vidéo, Html5VideoMedia peut également être un composant publicitaire d'introduction.
En termes d'adaptation, le schéma flexible est utilisé pour l'adaptation de style. Certains composants sont plus complexes, comme la barre de contrôle. Les fonctions web et mobile sont très différentes, et les styles sont également très différents. Vous pouvez envisager d'utiliser différents composants sur différentes plates-formes (control et controlMobile peuvent être vus sur la figure), et la logique sera très claire. , Vous n'avez pas besoin d'écrire beaucoup de if et else, mais comme cela dépend de plus de composants, les fichiers js et css seront plus volumineux. Personnellement, je pense que pour améliorer la maintenabilité du code, il est conseillé de sacrifier une partie de la taille du fichier.
,
2. Quelques fonctionnalités de la diffusion en direct HLS
Jugement du statut de diffusion en direct. En fait, la fonction de diffusion en direct est étroitement liée à l'entreprise. Le statut de la diffusion en direct ici est également le statut de l'entreprise uniquement, tel que: non démarré, sur le point de démarrer, diffusion en direct, diffusion en direct terminée, etc. Nos produits utilisent toujours l'interrogation frontale pour mettre à jour le statut de la diffusion en direct. Une chose à mentionner est que le flux hls ne déclenchera pas l'événement de fin, de sorte que le statut de la diffusion en direct h5 est en fait entièrement contrôlé par interrogation.
Comment déterminer le débit est anormal. Pour les problèmes de réseau généraux ou les problèmes de source, vous pouvez surveiller les événements d'erreur de la balise vidéo et de la balise source. Les deux balises doivent être surveillées. Mais le message d'erreur lorsque l'erreur est déclenchée n'est parfois pas une information, ou différents navigateurs ont des implémentations différentes. J'ai rencontré la modification de l'attribut currentTime pour rechercher avant, et parfois l'événement d'erreur sera déclenché, mais l'erreur indique seulement qu'il s'agit d'une erreur réseau. Sans aucune autre information, il était vraiment douloureux de déterminer qu'il s'agissait d'un problème de transcodage vidéo après avoir comparé d'autres vidéos. Pendant la lecture d'un flux en direct, des exceptions de diffusion occasionnelles peuvent se produire. Les exceptions de streaming apparaissent généralement lorsque l'écran se fige et ne déclenchent pas nécessairement des événements d'erreur. Je me réfère au plan du précédent collègue de Qingguo: vérifiez currentTime de temps en temps, si currentTime ne change pas pendant cette période de temps dans l'état de lecture, il est probable que le flux soit anormal, puis rechargez activement.
,
3. Quelques problèmes qui ne peuvent pas être résolus pour le moment
Il existe de nombreux problèmes liés à la vidéo sous iOS, car le système comporte trop de restrictions. Énumérez un peu:
1. Une seule vidéo ou audio peut être lue à la fois, et une seule balise vidéo ou audio est autorisée. Ce sera un peu gênant de faire la fonction de publicité d'introduction.
2. Lire des vidéos dans Safari avec une version ios inférieure forcera le plein écran, et ios 10 peut utiliser la lecture en ligne. Vous pouvez ajouter webkit-playinline à WeChat et à certains webkits personnalisés.
3. Sans opération humaine, il est impossible d'accéder à la page pour démarrer automatiquement la lecture de la vidéo
4. Sous iOS, js ne peut pas être utilisé pour contrôler le volume vidéo, il ne peut être contrôlé que par des boutons physiques. Dans iOS, vous pouvez masquer directement la fonction de contrôle du volume. . .
5. Il y a aussi le problème de prendre des captures d'écran, mais il n'y a pas de recherche si elle n'est pas utilisée dans le produit.
Il y a aussi de nombreux problèmes sur Android, principalement parce qu'il y a trop de versions d'Android, trop de modèles et tous les aspects sont inégaux. Énumérez un peu:
1. Certains systèmes Android remplaceront directement la balise vidéo et utiliseront le lecteur système pour jouer, ce qui est courant dans les téléphones mobiles nationaux
2. Le résultat de la détection de la méthode canPlayType ne correspond pas à la situation réelle. Ce problème a été rencontré au cours du processus de développement. Par exemple, il a été détecté que la lecture m3u8 n'est pas prise en charge sur un téléphone portable Asus, mais qu'elle peut en fait être lue. À l'origine, je voulais abandonner cette restriction, mais j'ai découvert plus tard que la lecture forcée dans la vue Web de l'application Cloud Classroom pouvait provoquer le blocage de l'application, de sorte que la détection est ajoutée à la fin. .
3. Les androïdes qui ne prennent pas en charge la lecture m3u8 se situent généralement autour d'androïdes 4.0 et inférieurs
|
Entrez l'email pour avoir une surprise
es.fmuser.org
it.fmuser.org
fr.fmuser.org
de.fmuser.org
af.fmuser.org -> Afrikaans
sq.fmuser.org -> albanais
ar.fmuser.org -> arabe
hy.fmuser.org -> Armenian
az.fmuser.org -> azerbaïdjanais
eu.fmuser.org -> basque
be.fmuser.org -> biélorusse
bg.fmuser.org -> Bulgare
ca.fmuser.org -> catalan
zh-CN.fmuser.org -> chinois (simplifié)
zh-TW.fmuser.org -> Chinois (traditionnel)
hr.fmuser.org -> croate
cs.fmuser.org -> tchèque
da.fmuser.org -> danois
nl.fmuser.org -> Néerlandais
et.fmuser.org -> estonien
tl.fmuser.org -> Philippin
fi.fmuser.org -> finnois
fr.fmuser.org -> Français
gl.fmuser.org -> Galicien
ka.fmuser.org -> géorgien
de.fmuser.org -> allemand
el.fmuser.org -> Grec
ht.fmuser.org -> Créole haïtien
iw.fmuser.org -> hébreu
hi.fmuser.org -> Hindi
hu.fmuser.org -> Hongrois
is.fmuser.org -> islandais
id.fmuser.org -> indonésien
ga.fmuser.org -> irlandais
it.fmuser.org -> Italien
ja.fmuser.org -> japonais
ko.fmuser.org -> coréen
lv.fmuser.org -> letton
lt.fmuser.org -> Lituanien
mk.fmuser.org -> macédonien
ms.fmuser.org -> malais
mt.fmuser.org -> maltais
no.fmuser.org -> Norwegian
fa.fmuser.org -> persan
pl.fmuser.org -> polonais
pt.fmuser.org -> portugais
ro.fmuser.org -> Roumain
ru.fmuser.org -> russe
sr.fmuser.org -> serbe
sk.fmuser.org -> slovaque
sl.fmuser.org -> Slovène
es.fmuser.org -> espagnol
sw.fmuser.org -> Swahili
sv.fmuser.org -> suédois
th.fmuser.org -> Thai
tr.fmuser.org -> turc
uk.fmuser.org -> ukrainien
ur.fmuser.org -> ourdou
vi.fmuser.org -> Vietnamienne
cy.fmuser.org -> Gallois
yi.fmuser.org -> Yiddish
FMUSER Wirless transmet la vidéo et l'audio plus facilement!
Contact
Adresse :
No.305 Chambre HuiLan Building No.273 Huanpu Road Guangzhou Chine 510620
Catégories
Newsletter