[ Web Proxy ]
URL:
Viewing: https://developer.mozilla.org/fr/docs/Web/Media [Back]  [Original]

Technologies mdias sur le web | MDN

Cette page a t traduite partir de l'anglais par la communaut. Vous pouvez contribuer en rejoignant la communaut francophone sur MDN Web Docs.

View in English Always switch to English

Technologies mdias sur le web

Au fil des ans, la capacit du Web prsenter, crer et grer des fichiers audio, vido et autres mdias s'est perfectionne. Il existe dsormais un grand nombre d'API, ainsi que des lments HTML, des interfaces DOM et d'autres fonctionnalits qui permettent de travailler avec les mdias de manire passionnante et immersive. Cet article rpertorie des guides et des rfrences pour diverses fonctionnalits que vous pouvez utiliser lorsque vous intgrez des mdias dans vos projets.

Dans cet article

Guides

Le guides des mdias sont des ressources qui vous aident comprendre, transformer et optimiser les mdias sur le Web, notamment les fichiers audio, vido et images, l'aide des technologies Web modernes.

Intgration audio et vido

Nous pouvons diffuser du contenu audio et vido sur le Web de diffrentes manires, allant des fichiers multimdias  statiques  aux flux adaptatifs en direct. Cet article se veut un point de dpart pour explorer les diffrents mcanismes de diffusion des mdias sur le Web et leur compatibilit avec les navigateurs courants.

Manipulation audio et vido

Le fait de disposer d'audio et de vido natifs dans le navigateur signifie que nous pouvons utiliser ces flux de donnes avec des technologies telles que <canvas>, WebGL ou l'API Web Audio pour modifier directement l'audio et la vido, par exemple en ajoutant des effets de rverbration/compression l'audio ou des filtres gris/spia la vido.

Guide de lecture automatique pour les API mdia et Web Audio

La lecture automatique inattendue de fichiers multimdias ou audio peut tre une surprise dsagrable pour les utilisateurices. Bien que la lecture automatique ait son utilit, elle doit tre utilise avec prcaution. Afin de permettre aux utilisateurices de contrler cette fonctionnalit, de nombreux navigateurs proposent dsormais des options de blocage de la lecture automatique. Cet article est un guide sur la lecture automatique, avec des conseils sur quand et comment l'utiliser et comment travailler avec les navigateurs pour grer le blocage de la lecture automatique de manire lgante.

Utiliser DASH avec les vidos en HTML

Le protocole DASH (Dynamic Adaptive Streaming over HTTP ou Diffusion adaptative dynamique sur HTTP, en franais) est un protocole de streaming adaptatif. Cela signifie qu'il permet un flux vido de basculer entre diffrents dbits en fonction des performances du rseau, afin de garantir la continuit de la lecture vido.

Diffusion audio et vido

Un guide qui explique comment diffuser du contenu audio et vido, ainsi que les techniques et technologies que vous pouvez utiliser pour garantir la meilleure qualit et/ou performance possible de vos diffusions.

Guide des types et formats de mdias : contenu image, audio et vido

Guide des types de fichiers et codecs disponibles pour les images, les fichiers audio et les vidos sur le Web. Il comprend des recommandations sur les formats utiliser pour chaque type de contenu, les meilleures pratiques, notamment comment fournir des solutions de secours et hirarchiser les types de mdias, ainsi que des informations gnrales sur la prise en charge par les navigateurs de chaque conteneur multimdia et codec.

Utilisation d'images dans HTML

Guide pour ajouter des images des sites Web ractifs, accessibles et performants.

Rfrences

HTML

Les lments HTML suivants sont utiliss pour inclure des mdias dans une page.

<audio>

L'lment <audio> est utilis pour lire l'audio. Il peut tre utilis de manire invisible comme destination pour des supports plus complexes, ou avec des contrles visibles permettant l'utilisateur de contrler la lecture des fichiers audio. Accessible depuis JavaScript en tant qu'objets HTMLAudioElement.

<video>

L'lment <video> est utilis pour lire du contenu vido. Il peut tre utilis pour prsenter des fichiers vido ou comme destination pour le contenu vido en streaming. <video> Peut galement tre utilis comme un moyen de relier des API mdia d'autres technologies HTML et DOM, notamment <canvas> (pour la capture et la manipulation d'images), par exemple. Il est accessible depuis JavaScript en tant qu'objets HTMLVideoElement.

<track>

L'lment HTML <track> peut tre plac dans un lment <audio> ou <video> afin de fournir une rfrence une piste de sous-titres ou de lgende au format WebVTT utiliser lors de la lecture des mdias. Accessible depuis JavaScript en tant qu'objets HTMLTrackElement.

<source>

L'lment HTML <source> est utilis dans un lment <audio> ou <video> pour spcifier les mdias source prsenter. Plusieurs sources peuvent tre utilises pour fournir le mdia dans diffrents formats, tailles ou rsolutions. Accessible depuis JavaScript en tant qu'objets HTMLSourceElement.

API

API Media Capabilities

L'API Media Capabilities vous permet de dterminer les capacits d'encodage et de dcodage de l'appareil sur lequel votre application ou votre site fonctionne. Vous pouvez ainsi dcider en temps rel quels formats utiliser et quel moment.

API Media Capture et Streams

Rfrence pour l'API qui permet de diffuser, d'enregistrer et de manipuler des mdias la fois localement et sur un rseau. Cela inclut l'utilisation de camras et de microphones locaux pour capturer des vidos, des fichiers audio et des images fixes.

API Media Session

L'API Media Session permet de personnaliser les notifications multimdias. Pour ce faire, elle fournit des mtadonnes qui seront affiches par l'agent utilisateur pour les mdias lus par votre application Web. Elle fournit galement des gestionnaires d'actions que le navigateur peut utiliser pour accder aux touches multimdias de la plateforme, telles que les touches matrielles des claviers, des casques et des tlcommandes, ainsi que les touches logicielles situes dans les zones de notification et sur les crans de verrouillage des appareils mobiles.

API d'enregistrement MediaStream

L'API d'enregistrement MediaStream vous permet de capturer des flux multimdias afin de traiter ou filtrer les donnes, ou encore de les enregistrer sur disque.

API Web Audio

L'API Web Audio vous permet de gnrer, filtrer et manipuler des donnes audio en temps rel et sur des enregistrements, puis d'envoyer ces donnes audio vers une destination telle qu'un lment <audio>, un flux multimdia ou un disque.

WebRTC

WebRTC (Web Real-Time Communication ou Communication en temps rel sur le Web, en franais) permet de diffuser en direct des flux audio et vido, ainsi que de transfrer des donnes arbitraires, entre deux pairs sur Internet, sans passer par un intermdiaire.

Sujets connexes

Sujets connexes susceptibles de vous intresser, car ils peuvent tre utiliss de manire intressante en tandem avec les API multimdias.

Multimdia accessible

Dans ce guide, nous abordons les diffrentes faons dont les concepteurs et dveloppeurs Web peuvent crer du contenu accessible aux personnes ayant des capacits diffrentes. Cela va de l'utilisation de l'attribut alt sur les lments <img> aux lgendes, en passant par le balisage des mdias pour les lecteurs d'cran.

API Canvas

L'API Canvas vous permet de dessiner dans un <canvas>, de manipuler et de modifier le contenu d'une image. Elle peut tre utilise avec les mdias de nombreuses faons, notamment en dfinissant un lment <canvas> comme destination pour la lecture vido ou la capture par camra, afin de pouvoir capturer et manipuler des images vido.

WebGL

WebGL fournit une API compatible OpenGL ES en plus de l'API Canvas existante, ce qui permet de raliser des graphiques 3D puissants sur le Web. Grce un canevas, cela peut tre utilis pour ajouter des images 3D du contenu multimdia.

WebXR

WebXR, qui a remplac l'API WebVR dsormais obsolte, est une technologie qui prend en charge la cration de contenu en ralit virtuelle (VR) et en ralit augmente (AR). Le contenu en ralit mixte peut ensuite tre affich sur l'cran de l'appareil ou l'aide de lunettes ou d'un casque.

WebVR

L'API Web Virtual Reality prend en charge les appareils de ralit virtuelle (VR) tels que l'Oculus Rift ou le HTC Vive, permettant aux dveloppeurs de traduire la position et les mouvements de l'utilisateur en mouvements dans une scne 3D qui est ensuite prsente sur l'appareil. WebVR a t remplac par WebXR et devrait bientt tre supprim des navigateurs.

Fondamentaux pour la spatialisation avec Web Audio

Dans les environnements 3D, qu'il s'agisse de scnes 3D rendues l'cran ou d'une exprience de ralit mixte vcue l'aide d'un casque, il est important que le son soit restitu de manire donner l'impression qu'il provient de la direction de sa source. Ce guide explique comment y parvenir.


Web Proxy Viewer  |  New URL  |  Original Page