Construisez un lecteur multimédia avec HTML

Les possibilités de médias en HTML ont décollé avec l'introduction des éléments vidéo et audio dans HTML5. Maintenant, nous pouvons intégrer la vidéo et l'audio dans des sites Web sans avoir besoin de technologies propriétaires comme Flash ou Silverlight.

avec le support du navigateur mieux que jamais, et de nouvelles technologies comme WebVTT commencent à arriver, c'est le moment idéal pour apprendre (ou pour revoir) ces nouveaux éléments HTML.

SitePoint vient de lancer Build votre propre lecteur multimédia HTML, un cours qui vous met au courant des éléments médiatiques HTML5 et comment les faire passer au niveau suivant avec CSS et JavaScript.

Voici une vidéo du cours qui fait rouler la balle, vous montrant comment structurer le code HTML pour un lecteur multimédia personnalisé. (Les vidéos ultérieures montrent comment construire sur cela avec CSS et JavaScript pour créer un lecteur multimédia personnalisé entièrement fonctionnel.)

Chargement du joueur…

Vous pouvez télécharger les fichiers source pour cette démo sur github.

Si vous avez trouvé cela utile, consultez le cours complet sur SitePoint - qui vous emmène des bases jusqu'à développer un lecteur multimédia personnalisé entièrement fonctionnel, en jouant à la fois audio et vidéo.

Les questions fréquemment posées (FAQ) sur la construction d'un lecteur multimédia dans HTML

Quelles sont les balises HTML de base nécessaires pour créer un lecteur multimédia?

Pour créer un lecteur multimédia dans HTML, vous devez utiliser les

Comment puis-je faire mon lecteur multimédia Réactif?

Pour rendre votre lecteur multimédia réactif, vous pouvez utiliser CSS. En définissant la largeur de la vidéo à 100% et la hauteur à Auto, le lecteur vidéo évoluera en fonction de la taille de son conteneur. Cela garantit que le lecteur multimédia s'adaptera à différentes tailles d'écran et orientations.

Comment puis-je ajouter des sous-titres ou des légendes à mon lecteur multimédia?

Vous pouvez ajouter des sous-titres ou des légendes à votre lecteur multimédia en utilisant La balise. Cette balise est utilisée dans la balise

Comment puis-je personnaliser les contrôles de mon lecteur multimédia?

La personnalisation des contrôles de votre lecteur multimédia nécessite JavaScript et CSS. Vous pouvez masquer les contrôles par défaut en supprimant l'attribut «Controls» de la

Comment puis-je rendre mon lecteur multimédia compatible avec différents navigateurs?

Pour assurer la compatibilité avec différents navigateurs, vous pouvez fournir plusieurs Fichiers source dans différents formats. Le navigateur utilisera le premier fichier source qu'il prend en charge. Cela peut être fait en utilisant plusieurs balises dans le

Comment puis-je ajouter une image d'affiche à mon lecteur multimédia?

Vous pouvez Ajoutez une image d'affiche à votre lecteur multimédia à l'aide de l'attribut 'affiche' dans la balise

Comment puis-je boucler une vidéo ou un audio dans mon lecteur multimédia?

Vous pouvez faire boucle une vidéo ou un audio dans votre lecteur multimédia à l'aide de l'attribut 'LOOP' dans le

Comment puis-je muet l'audio dans mon lecteur multimédia?

Vous pouvez couper l'audio de votre lecteur multimédia en utilisant l'attribut «muet» dans le

Comment puis-je précharger la vidéo ou l'audio dans mon lecteur multimédia?

Vous pouvez précharger La vidéo ou l'audio de votre lecteur multimédia à l'aide de l'attribut 'Preload' dans le

Comment puis-je lire une vidéo ou un audio en plein écran dans mon lecteur multimédia?

La lecture d'une vidéo ou d'un audio en plein écran nécessite l'API plein écran, qui est une API JavaScript. Vous pouvez utiliser la méthode «requestfullScreen» pour faire en sorte que l'élément vidéo ou audio devient plein écran. Cette méthode doit être exécutée à la suite d'une action utilisateur, comme un événement de clic.

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!