Share
Vous souhaitez créer votre propre application semblable à Twitch.tv pour diffuser votre travail en direct? Que diriez-vous de votre propre programme YouTube-esque pour lire votre vidéo précédemment enregistrée? Vous avez peut-être déjà utilisé Flash, Java ou Silverlight pour les contenus multimédias, mais avec Chrome 42 annonçant que ces plug-ins ne sont plus pris en charge, il est désormais temps de passer à HTML5..
Avant de travailler chez Microsoft, j'étais ingénieur principal au sein de l'équipe de développement de produits de Comcast, où je travaillais sur des lecteurs vidéo pour plusieurs plates-formes, notamment le Web, la Xbox One, la Xbox 360 et SmartGlass. Ce fut une formation exceptionnelle en technologie vidéo de pointe et je suis heureux de pouvoir utiliser mon expérience avec moi dans ce rôle et d'enseigner aux autres beaucoup de ce que j'ai appris là-bas..
Il s'agit du premier d'une série d'articles sur l'utilisation d'Azure Media Services pour créer et utiliser des vidéos HTML5. Dans ce didacticiel, nous expliquerons comment utiliser cette solution multimédia en nuage pour configurer et commencer à expérimenter la diffusion de vidéos en direct ou à la demande..
Vous avez le choix entre plusieurs formats. Voyons donc quelques-uns de ceux que vous pouvez utiliser aujourd'hui. Tout d’abord, nous devons comprendre comment fonctionne le traitement à la vapeur adaptatif, étant donné que bon nombre de ces technologies à venir reposent sur ce principe..
La diffusion en continu adaptative segmente la vidéo en petits morceaux. La partie «adaptative» de ceci est le fait que la vidéo est codée à plusieurs débits et résolutions, créant des morceaux de plusieurs tailles. À partir de là, le joueur peut choisir entre différents débits / résolutions et s’adapter automatiquement à des fragments plus volumineux ou plus petits lorsque les conditions du réseau changent.
Scott Hanselman le décrit (bien, Smooth Streaming au moins) bien.
«Vous devez bien le voir pour l'obtenir, mais c'est en fait intelligent dans sa simplicité. Certaines personnes paniquent lorsqu'elles prennent un fichier vidéo de 200 Mo, par exemple, et l'encodent pour Smooth Streaming. Le répertoire résultant est, par exemple, de 500 Mo. Ils pourraient dire, c'est plus grand! Je n'ai pas ce genre de bande passante! En fait, moins d’envois sur le réseau qu’il n’existe sur le disque. L'idée est que Smooth Streaming crée des “étapes” de débits binaires. Il encode et stocke votre fichier à plusieurs débits sur le disque.
Source: Scott HanselmanCeci télécharge et met en cache la vidéo sur l'ordinateur du spectateur. Un court laps de temps est requis pour mettre en mémoire tampon et mettre en cache le début du fichier multimédia avant sa lecture. Une fois que la vidéo a été mise en cache, la visualisation ultérieure ne nécessite aucune mise en mémoire tampon. À l'aide du protocole HTTP standard, les fichiers téléchargés progressivement sont généralement livrés via un réseau de distribution de contenu (CDN). Ainsi, votre lecteur vidéo crée une connexion HTTP directe avec les serveurs du CDN (Azure) pour récupérer le contenu..
La perte de bande passante constitue l’inconvénient d’utiliser quelque chose comme ceci. Le lecteur commencera la lecture de la vidéo dès qu'il aura suffisamment de données pour le faire, mais il continuera à télécharger jusqu'à ce qu'il ait reçu le fichier entier, quel que soit le nombre de visionnages de l'utilisateur. Qu'advient-il lorsque le spectateur quitte après une minute? Bande passante gaspillée.
De plus, cela ne permet pas à la qualité de la vidéo de changer en cours de téléchargement, contrairement aux formats énumérés ci-dessous..
HTTP Live Streaming (HLS) appartient à Apple et fonctionne sur le principe de la diffusion en continu adaptative, généralement réalisée en parties de dix secondes. De plus, il prend en charge les vidéos en direct et à la demande..
Cela a été annoncé en octobre 2008 dans le cadre de Silverlight. Il s'agit d'une fonctionnalité des services de média IIS (Internet Information Services), une plateforme de diffusion multimédia intégrée basée sur HTTP..
Smooth Streaming présente toutes les caractéristiques typiques de la diffusion adaptative. Ceci est fourni via HTTP, segmenté en petits morceaux, et généralement plusieurs débits binaires sont codés afin que le lecteur puisse examiner les conditions de votre réseau afin de choisir le meilleur débit binaire vidéo pour une expérience de visualisation optimale..
Les faibles coûts d'infrastructure Web, la compatibilité avec le pare-feu et la commutation de débit sont quelques-uns des avantages du streaming adaptatif.
Le grand différenciateur de DASH est qu’il s’agit d’une norme internationale désormais contrôlée par un organisme de normalisation, le MPEG (Motion Picture Experts Group), et non par Microsoft (Smooth Streaming) ou Apple (HLS). Plusieurs entreprises ont participé aux efforts de création et de normalisation autour de MPEG DASH, notamment Microsoft, Apple, Netflix, Qualcomm, Ericsson, Samsung et bien d'autres..
Nous considérons que MPEG-DASH remplace à terme toutes les fonctionnalités que nous avons introduites et mises en œuvre ces dernières années avec Smooth Streaming. Au fil du temps, nous aurons besoin de la parité des fonctionnalités de Smooth avec le support DASH et introduirons des fonctionnalités encore plus cool qui ne sont disponibles que dans un standard de l'industrie tel que DASH..
La balise video () est en HTML5 depuis plusieurs années et tous les navigateurs modernes le supportent. La page des écoles du W3C illustre bien son utilisation.
Voici comment il est facile de l'ajouter à votre page:
En fait, vous l'utilisez probablement tous les jours. Netflix s’appuyait sur Silverlight en tant que lecteur vidéo, mais il tourne maintenant sur la vidéo HTML5. Auparavant, YouTube utilisait Flash, mais une grande partie de son contenu est en cours de conversion au format HTML5. Vous connaissez les lecteurs vidéo que vous voyez sur Xbox One (YouTube, Xbox Video, Netflix, etc.)? Oui, ce sont tous des HTML5 aussi.
Il est même devenu beaucoup plus facile de tester la vidéo HTML5 sur différents navigateurs, en particulier diverses versions d'Internet Explorer et le nouveau Microsoft Edge. Pour ce faire, vous pouvez obtenir des machines virtuelles gratuites ou effectuer des tests à distance sur votre périphérique Mac, iOS, Android ou Windows..
Il y en a beaucoup à choisir. Dans ce didacticiel, j’utilise Azure Media Services Player, car c’est un bon choix pour commencer, pour avoir une idée du fonctionnement de la diffusion multimédia en continu. Il comprend plusieurs exemples de vidéos et un simple menu déroulant dans lequel vous pouvez sélectionner les différents formats et voir le niveau de technologie et de protection correspondant à chacun d'eux..
Il prend en charge une variété de formats prêts à l'emploi, notamment:
Mieux encore, vous n'avez même pas besoin de créer votre propre lecteur ou votre propre page pour tester votre contenu vidéo. Modifiez simplement l'URL de votre contenu, et c'est parti.
Vous pouvez également consulter le framework open source Video.js. Il est similaire au lecteur Microsoft (ci-dessous), mais offre également une multitude d’options facilitant son style. Ils ont aussi un excellent designer de peau. Si vous êtes moins familier avec les CSS avancés, je préférerais éviter cela..
Nous pouvons utiliser plusieurs frameworks de lecteurs, mais pour simplifier, utilisons le lecteur HTML5 fourni par Microsoft. Vous pouvez trouver la documentation à ce sujet ici. Il y a aussi un échantillon de travail.
Voici quelques avantages à l'utiliser:
«TLa structure du lecteur HTML5 offre une expérience vidéo cohérente au navigateur. Ceci est accompli en détectant la prise en charge de différentes technologies de lecteur vidéo disponibles sur le client (balise vidéo HTML5, Silverlight, etc.), puis en fournissant la même API JavaScript et le même ensemble de contrôles, quelle que soit la technologie utilisée. Il parcourra une liste de technologies de lecteur vidéo de remplacement jusqu'à ce qu'une technologie prise en charge soit trouvée.
Je vais inclure plus d'informations à ce sujet dans mon prochain post.
Dans mon prochain article, nous expliquerons le processus de création de votre propre lecteur vidéo dans le navigateur. Mieux encore, nous pouvons «encapsuler» ce site et ce lecteur HTML5 et créer des applications hybrides pour les appareils mobiles et Windows avec un outil tel que Cordova..
Ensuite, nous allons créer un compte Azure et créer notre premier contenu de services multimédia, que nous pourrons lire sur notre nouveau lecteur vidéo. Si vous souhaitez commencer tout de suite, vous pouvez vous inscrire pour un essai gratuit de Azure et de Visual Studio Community (maintenant aussi un IDE gratuit) ou contactez-moi pour savoir comment obtenir un compte BizSpark avec un crédit mensuel gratuit Azure..
Voici quelques ressources utiles pour en savoir plus sur les médias, Azure et la configuration rapide:
Ou la série d'apprentissage plus large de notre équipe sur HTML, CSS et JS:
Cet article fait partie de la série Web de développement Web de Microsoft. Nous sommes ravis de partager Microsoft Edge et le nouveau Moteur de rendu EdgeHTML avec toi. Obtenez des machines virtuelles gratuites ou testez à distance sur votre appareil Mac, iOS, Android ou Windows @ http://dev.modern.ie/.
Accentsconagua