Utiliser Video.js pour implémenter l'interface de diffusion en direct H5

Cette fois, je vais vous apporter les précautions concernant l'utilisation de Video.js pour implémenter l'interface de diffusion en direct H5 et l'utilisation de Video.js pour implémenter l'interface de diffusion en direct H5. est un cas pratique. Levez-vous et jetez un œil.

Récemment, j'ai créé une version mobile H5 simple de la page de diffusion en direct. Elle n'a que la fonction de diffusion en direct. J'ajouterai des barrages et des cadeaux plus tard. L'exigence est dans WeChat. diffusion, je veux toujours en savoir. Concernant les connaissances pertinentes sur la diffusion en direct,

1 Composition

Comme le montre la figure, l'arrière-plan utilise la vidéo. tag pour jouer la diffusion en direct. S'il y a un barrage, webscoket peut être utilisé pour l'obtenir en temps réel. Le barrage, les cadeaux ou l'animation sont implémentés en CSS3.

2. Processus

Le terminal mobile utilise le système natif et le PC utilise un logiciel obs pour collecter la vidéo dans le traitement des données, l'encodage , et via rtmp Poussez le flux vers le serveur multimédia de streaming. Le serveur multimédia de streaming générera des flux vidéo de lecture dans différents formats, tels que rtmp, hls, puis extraira le flux, le décodage audio et vidéo et la lecture.

3. Streaming

RTMP

: Il s'agit d'un protocole de transmission de messages en temps réel développé par Macromedia. Le protocole est basé sur TCP et maintenant. appartient à Adobe. Il est principalement utilisé pour la concentricité audio, vidéo et données entre la plate-forme Flash/air et le serveur de streaming multimédia/d'interaction prenant en charge le protocole RTMP.

Avantages : Le protocole est simple, facile à mettre en œuvre sur diverses plates-formes et dispose d'un bon support CDN.

4. Flux tiré

Grâce à la compréhension, il est divisé en 3 types.

RTMP : Essentiellement une longue liaison TCP, les données à chaque instant sont transmises immédiatement après avoir été reçues, avec une faible latence.
-HTTP-FLV : Essentiellement un lien HTTP long, les données à chaque instant sont transmises immédiatement après avoir été reçues, avec une faible latence.
-HLS : lien court HTTP, bon multiplateforme, latence légèrement supérieure. Il comprend principalement deux contenus : le fichier .m3u8 et le fichier .ts. En demandant l'url de m3u8, la balise vidéo analysera le fichier et trouvera le fichier ts correspondant à lire.

5. Problèmes rencontrés

Utilisation principalement de video.js

noyau QQx5 :
Dans Android WeChat, navigateur qq, car c'est un x5, une couche de lecture système apparaîtra lors de la lecture d'une vidéo. Cependant, il y a un bug dans le navigateur QQ et il y a une couche noire sur la couche supérieure. La solution est de masquer la balise vidéo.

Lorsque les données sont reçues lors de la diffusion en direct, elles sont en protocole rtmp et ne peuvent pas être diffusées directement. Elles sont converties au format .m3u8

<source src="http://xxxxxx.m3u8" type=&#39;&#39;application/x-mpegURL" />

Lors de l'enregistrement. jouées, les données sont reçues au format MP4 et peuvent être directement diffusées. Utilisation

<source src="http://xxxxxx.mp4" type=&#39;&#39;video/mp4" />

Je pense que vous maîtrisez la méthode après avoir lu ces cas. Pour des informations plus intéressantes, veuillez faire attention aux autres. articles connexes sur le site php chinois !

Lecture connexe :

Comment utiliser l'attribut méta viewport du HTML

Comment utiliser l'encodage base64 au lieu du HTML images

Comment utiliser la ligne horizontale hr en HTML

Comment obtenir une disposition mixte de graphiques et de texte dans HTML

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!