Comment intégrer l'audio et la vidéo dans HTML5 en utilisant le & lt; audio & gt; et & lt; vidéo & gt; Éléments?

Incorporer l'audio et la vidéo dans HTML5 à l'aide d'éléments <audio></audio> et <video></video>

Les éléments <audio></audio> et <video></video> de HTML5 fournissent un moyen simple d'intégrer du contenu audio et vidéo dans vos pages Web. La structure de base est simple. Pour l'audio, vous utilisez la balise <audio></audio> et spécifiez la source à l'aide de la balise <source></source> , vous permettant de fournir plusieurs sources pour différentes compatibilité du navigateur. Pour la vidéo, vous utilisez la balise <video></video> de la même manière. Voici des exemples:

Exemple audio:

 <code class="html"><audio controls> <source src="audio.mp3" type="audio/mpeg"> <source src="audio.ogg" type="audio/ogg"> Your browser does not support the audio element. </source></source></audio></code>

Ce code essaie d'abord de lire audio.mp3 . Si le navigateur ne prend pas en charge MP3, il essaie audio.ogg . Si aucun n'est pris en charge, le texte de secours s'affiche.

Exemple vidéo:

 <code class="html"><video width="320" height="240" controls> <source src="video.mp4" type="video/mp4"> <source src="video.webm" type="video/webm"> Your browser does not support the video tag. </source></source></video></code>

Cet exemple essaie également de lire video.mp4 puis video.webm , avec un message de secours si aucun n'est pris en charge. La width et les attributs height définissent les dimensions initiales. L'attribut controls ajoute des contrôles de lecture par défaut.

Attributs et méthodes communes des éléments <audio></audio> et <video></video>

Les éléments <audio></audio> et <video></video> partagent de nombreux attributs et méthodes communs. Voici quelques clés:

Attributs:

• src : Spécifie l'URL du fichier multimédia.
• controls : ajoute des contrôles de lecture par défaut (play, pause, volume, etc.).
• autoplay : démarre automatiquement la lecture lorsque la page se charge. (Souvent, la lecture automatique est limitée par les navigateurs pour l'expérience utilisateur.)
• loop : joue les médias à plusieurs reprises.
• muted : commence la lecture en sourdine.
• preload : indices au navigateur Comment charger le support (par exemple, auto , metadata , none ).
• poster : (vidéo uniquement) Spécifie une image à afficher avant le début de la lecture.
• width et height : définissez les dimensions du lecteur vidéo.

Méthodes:

• play() : commence la lecture.
• pause() : la lecture de pause.
• currentTime : obtient ou définit le temps de lecture actuel.
• volume : obtient ou définit le volume (0,0 à 1,0).
• muted : obtient ou définit l'état en sourdine.

Ces attributs et méthodes permettent un contrôle significatif sur l'expérience de la lecture des médias. N'oubliez pas de gérer les erreurs potentielles à l'aide des écouteurs d'événements (par exemple, événement error ).

Gérer différents problèmes de compatibilité du navigateur

La compatibilité du navigateur est un aspect crucial de l'intégration de l'audio et de la vidéo. Différents navigateurs prennent en charge différents codecs (méthodes d'encodage des données multimédias). Pour y remédier:

• Fournissez plusieurs sources: comme indiqué dans les exemples ci-dessus, utilisez l'élément <source></source> pour fournir plusieurs sources multimédias avec différents codecs (par exemple, MP4, WebM, OGG). Cela garantit que les navigateurs peuvent trouver un format compatible.
• Utilisez une bibliothèque JavaScript: des bibliothèques comme Howler.js (pour l'audio) peuvent abstraction de certaines des complexités spécifiques du navigateur, fournissant une API cohérente sur différents navigateurs.
• Contenu de secours: fournissez toujours du contenu de secours (comme le SMS dans les exemples) pour les navigateurs qui ne prennent pas en charge les éléments <audio></audio> ou <video></video> ou les codecs spécifiés.
• Modernizr: Une bibliothèque JavaScript comme Modernizr peut détecter les capacités du navigateur et vous permettre de servir différents contenus en fonction de la prise en charge du navigateur.

En mettant en œuvre ces stratégies, vous pouvez améliorer considérablement la probabilité que votre contenu audio et vidéo se joue correctement sur un large éventail de navigateurs.

Assurer la conception réactive de l'audio et de la vidéo intégrées

La conception réactive garantit que vos médias s'adaptent bien aux différentes tailles d'écran. Voici comment y parvenir:

• Utilisez des dimensions basées sur le pourcentage: au lieu des attributs width et height fixes, utilisez les pourcentages. Cela permet au lecteur vidéo de mettre à l'échelle proportionnellement la taille de l'écran. Par exemple: <video width="100%" height="auto" controls></video> .
• Style CSS: utilisez CSS pour contrôler la disposition et la réactivité. Vous pouvez utiliser les requêtes multimédias pour ajuster la taille et le placement du lecteur multimédia en fonction de la taille de l'écran.
• Élément de conteneur: enveloppez l'élément <audio></audio> ou <video></video> dans un élément de conteneur (par exemple, un <div> ) et style le conteneur pour s'assurer qu'il répond de manière appropriée. Cela vous donne un meilleur contrôle sur la disposition globale.<li> <strong>Ratio d'aspect:</strong> Maintenez le bon rapport d'aspect de votre vidéo pour éviter la distorsion. Vous pouvez utiliser le rembourrage CSS ou d'autres techniques pour y parvenir. Par exemple, l'utilisation de padding-boot avec un pourcentage calculé sur la base du rapport d'aspect.</li> <p> En combinant ces techniques, votre contenu audio et vidéo intégré s'adaptera de manière transparente à différents appareils et tailles d'écran, offrant une expérience utilisateur cohérente sur toutes les plateformes.</p> </div>

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!