Comment ajouter et lire des vidéos sur une page Web à l'aide de HTML?

Célia Girard

HTML (Hypertext Markup Language) est un langage de balisage utilisé pour créer des pages Web, et il comprend des fonctionnalités d'intégration du contenu multimédia, telles que des vidéos. Utiliser HTML, l'ajout et la lecture de vidéos sur une page Web est un moyen d'afficher le contenu vidéo sur un site Web. De cette façon, les propriétaires de sites Web peuvent améliorer l'expérience utilisateur, engager les visiteurs et communiquer les informations de manière plus dynamique et convaincante.

Cet article montre comment ajouter et lire des vidéos sur un site Web en utilisant:

"" Étiqueter
"" Étiqueter
"" Étiqueter</strong></li> <li><strong> "" Étiqueter</strong></li> <li><strong>Bonus: intégrer des vidéos de la source en ligne comme YouTube</strong></li> </ul> <p>Méthode 1: Utilisation de la balise «»</p> <p>Pour afficher la vidéo sur la page Web, la méthode la plus recommandée est la «" étiqueter. Cette balise utilise le «”Tag en tant qu'enfant qui obtient l'adresse et le type du fichier. Après avoir fourni la source de la vidéo, les utilisateurs peuvent l'afficher sur le site Web:</p> <br><h1> Propulsé par Linuxhint </h1><br><video controls width="50%" height="50%"><br><source src="sea.mp4" type="video/mp4"/><br></video><br> <p>Dans l'extrait de code ci-dessus, le <strong>«» La balise utilise des «commandes», «largeur» et «hauteur»</strong> Attributs pour ajouter des contrôles pour la vidéo, ainsi que sa hauteur et sa largeur. Cependant, le <strong>""</strong> Tag a beaucoup plus d'attributs pour effectuer des fonctionnalités spécifiques. </p> <p>Après avoir exécuté le code, la page Web ressemble à ceci:</p> <p> <br>La sortie ci-dessus montre que la vidéo a été ajoutée et joue sur la page Web.</p> <p>Méthode 2: Utilisation de la balise «»</p> <p>La balise d'objet peut également être utilisée pour afficher la vidéo sur une page Web. Car il crée un conteneur dans lequel les fichiers multimédias et les applications de plug-in peuvent être insérés. De plus, il consomme moins de lignes de code et est facile à modifier:</p> <br><h1>Propulsé par Linuxhint</h1><br><br><br><object data="sea.mp4" height="255px" width="450px" ></object><br> <p>Dans l'extrait de code ci-dessus:</p> <p>- Pour insérer la vidéo en utilisant le "”Tag, insérez le chemin vidéo comme valeur pour son"<strong>données</strong>" attribut.</p> <p>- Ensuite, utilisez le «<strong>Hauteur et largeur</strong>»Attributs pour définir les dimensions / taille de la vidéo sur la page Web.</p> <p>Après avoir exécuté le code ci-dessus:</p> <p>La sortie confirme que la vidéo joue dans la fenêtre.</p> <p>Méthode 3: Utilisation "<iframe>" Étiqueter</p> <p>Le "<strong><iframe></strong>"La balise peut être utilisée pour ajouter et lire des vidéos sur une page Web en raison de sa forte liaison avec les documents parentaux. Il aide à intégrer le contenu tiers de la page Web, cette balise est principalement utilisée en contraste avec les balises d'intégration et d'objet. Le code pour ajouter une vidéo du répertoire local dans le fichier HTML est:</p> <br><h1>Propulsé par Linuxhint</h1><br><br><br><iframe src="sea.mp4" height="255px" width="450" >

Dans l'extrait de code ci-dessus:

Tout d'abord, le parent div est conçu pour afficher les éléments contenant au centre de la page Web.

Puis le "</strong>" étiqueter "<strong>SRC</strong>»L'attribut est utilisé pour stocker le chemin vidéo.</li> <li>Après cela, pour définir la taille de la vidéo "<strong>hauteur</strong>" et "<strong>largeur</strong>«Attributs du«<strong><iframe></strong>”TAG est utilisé.</li> </ul> <p>Après l'exécution du code ci-dessus, la page Web ressemble à ceci:</p> <p>La sortie ci-dessus affiche que la vidéo a été ajoutée et jouée sur le site Web.</p> <p>Méthode 4: Utilisation de la balise «»</p> <p>Le "”TAG peut également être utilisé pour ajouter et lire des vidéos sur la page Web. Cette balise peut également être utilisée pour afficher des images et des fichiers HTML:</p> <br><h1>Propulsé par Linuxhint</h1><br><br><br><embed type="video/mp4" src="sea.mp4" width="400" height="300"><br> <p>Dans ce code,</p> <p>- Une vidéo est intégrée dans une page HTML avec le fichier source "<strong>mer.MP4</strong>»Et une largeur et une hauteur de 400 et 300 pixels, respectivement.</p> <p>- La vidéo est affichée dans un conteneur centré avec le titre "<strong>Propulsé par Linuxhint</strong>" Au dessus de.</p> <p>Après avoir exécuté l'extrait de code ci-dessus, la page Web ressemble à ceci:</p> <p>Le GIF ci-dessus illustre que la vidéo est ajoutée et jouée sur la page Web en utilisant le "" étiqueter.</p> <p>Bonus: intégrer des vidéos de la source en ligne comme YouTube</p> <p>Pour intégrer la vidéo à partir d'un site tiers comme YouTube, le "<strong><iframe>" et "</strong>»Les balises peuvent être très utiles. Ces balises permettent aux développeurs d'intégrer des vidéos directement sur le site Web sans avoir besoin de télécharger ces vidéos. Pour effectuer cela, le lien vidéo intégré est requis qui peut être accessible en suivant le court guide ci-dessous:</p> <ul> <li>Tout d'abord, sélectionnez la vidéo YouTube que l'utilisateur souhaite afficher sur sa page Web. Puis ouvrez la liste des options pour cette vidéo. Après cela, trouvez et sélectionnez le «<strong>Partager</strong>" option:</li> </ul> <ul> <li>Après cela, la fenêtre courte est ouverte et sélectionnez le «<strong>Encombrer</strong>”Option d'ici:</li> </ul> <ul> <li>Après cela, le lien vidéo intégré est généré et copier l'URL:</li> </ul> <p>Après avoir copié le «<strong>Encombrer</strong>”Code vidéo, insérez-le comme une valeur du"<strong>SRC</strong>«Attribut dans le«<strong><iframe></strong>" étiqueter:</p> <br><h1>Propulsé par Linuxhint</h1><br><br><br><iframe width="560" height="315" src="https://www.youtube.com/embed/NSAOrGb9orM" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen><br>

Maintenant, pour afficher la même vidéo YouTube en utilisant le "" étiqueter. Insérez le «SRC«Valeur d'attribut dans le«données«Attribut du«" étiqueter:

Après avoir exécuté les codes ci-dessus, la page Web ressemble à ceci:

Dans le GIF ci-dessus, la première vidéo YouTube a été affichée sur la page Web.

Conclusion

Pour ajouter et lire des vidéos sur la page Web, les utilisateurs peuvent utiliser le "","", et "</strong>”Tags HTML. Le ""La balise est enveloppée par le"”Tag pour afficher le fichier vidéo sur la page Web. Pour le "<strong><iframe></strong>”Tag, placez le chemin de l'image dans son«<strong>SRC</strong>" attribut. Et pour le «”TAG Placez le chemin d'image comme une valeur pour le«<strong>données</strong>" attribut. Cet article a démontré comment ajouter et lire des vidéos sur une page Web à l'aide de HTML.</p> </div> <div class="rek-block rek-block-article"> </div> <ul class="prev-next"> <li class="prev-next__item prev-next__item--left"><a href="http://fr.cyberaxe.org/article/how-to-create-html-bullet-points">« Comment créer des puces HTML?</a></li> <li class="prev-next__item prev-next__item--right"><a href="http://fr.cyberaxe.org/article/how-can-flexbox-be-used-to-create-a-navigation-bar">Comment Flexbox peut-il être utilisé pour créer une barre de navigation? »</a></li> </ul> <style> .prev-next { display: flex; align-items: center; justify-content: space-between; margin: 0; padding: 20px 0; list-style: none; gap: 30px; } .prev-next li { max-width: 50%; } .prev-next__item { display: inline-block; font-weight: bold; } .prev-next__item--left { text-align: left; } .prev-next__item--right { text-align: right; } @media(max-width: 768px) { .prev-next li { max-width: 85%; } .prev-next__item--left { align-self: flex-start; } .prev-next__item--right { align-self: flex-end; } .prev-next { display: flex; flex-direction: column; } } </style> </div> <div class="col-xl-4"> <div class="sidebar-news"> <div class="rek-block rek-block-sidebar"> </div> <div class="white-news white-news--article"> <div class="white-news__cat"> <a href="http://fr.cyberaxe.org/category/c-sharp">c Sharp</a> </div> <div class="white-news__name"> <a href="http://fr.cyberaxe.org/article/how-to-use-inheritance-in-c">Comment utiliser l'héritage en C #</a> </div> <div class="white-news__text"> L'héritage permet à une classe de hériter des propriétés et des méthodes d'une autre classe. Il perm... </div> <div class="white-news__author"> <a href="http://fr.cyberaxe.org/author/mohamed-benoit">Mohamed Benoit</a> </div> </div> <div class="white-news white-news--article"> <div class="white-news__cat"> <a href="http://fr.cyberaxe.org/category/c-programming">C programmation C</a> </div> <div class="white-news__name"> <a href="http://fr.cyberaxe.org/article/what-is-the-difference-between--and--operators-in-c-programming">Quelle est la différence entre les opérateurs = == en programmation C?</a> </div> <div class="white-news__text"> L'opérateur = est utilisé pour attribuer une valeur à une variable, tandis que l'opérateur == compar... </div> <div class="white-news__author"> <a href="http://fr.cyberaxe.org/author/ines-dubois">Ines Dubois</a> </div> </div> <div class="white-news white-news--article"> <div class="white-news__cat"> <a href="http://fr.cyberaxe.org/category/sqlite">Sqlite</a> </div> <div class="white-news__name"> <a href="http://fr.cyberaxe.org/article/what-is-sqlite-used-for-is-it-better-than-sql">À quoi sert Sqlite pour? Est-ce mieux que SQL?</a> </div> <div class="white-news__text"> SQLite est une base de données basée sur des fichiers qui est autonome, sans serveur et ne nécessite... </div> <div class="white-news__author"> <a href="http://fr.cyberaxe.org/author/sarah-roux">Sarah Roux</a> </div> </div> </div> </div> </div> </div> <div class="container"> <div class="my-slider"> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://fr.cyberaxe.org/category/python">Python</a> </div> <div class="header-news__name"> <a href="http://fr.cyberaxe.org/article/remove-special-characters-from-string-python">Supprimer les caractères spéciaux de String Python</a> </div> <div class="header-news__author"> <a href="http://fr.cyberaxe.org/author/sarah-roux">Sarah Roux</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://fr.cyberaxe.org/category/python">Python</a> </div> <div class="header-news__name"> <a href="http://fr.cyberaxe.org/article/python-list-to-comma-separated-string">Liste Python à la chaîne séparée par virgule</a> </div> <div class="header-news__author"> <a href="http://fr.cyberaxe.org/author/mohamed-benoit">Mohamed Benoit</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://fr.cyberaxe.org/category/python">Python</a> </div> <div class="header-news__name"> <a href="http://fr.cyberaxe.org/article/python-stringio">Python stringio</a> </div> <div class="header-news__author"> <a href="http://fr.cyberaxe.org/author/sarah-roux">Sarah Roux</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://fr.cyberaxe.org/category/python">Python</a> </div> <div class="header-news__name"> <a href="http://fr.cyberaxe.org/article/how-do-i-convert-an-exception-to-a-string-in-python">Comment convertir une exception en une chaîne en python</a> </div> <div class="header-news__author"> <a href="http://fr.cyberaxe.org/author/nathan-blanc">Nathan Blanc</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://fr.cyberaxe.org/category/docker">Docker</a> </div> <div class="header-news__name"> <a href="http://fr.cyberaxe.org/article/what-is-docker-bind-mounts">Qu'est-ce que les montures Docker Bind?</a> </div> <div class="header-news__author"> <a href="http://fr.cyberaxe.org/author/zoe-martinez">Zoe Martinez</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://fr.cyberaxe.org/category/oracle-database">Base de données Oracle</a> </div> <div class="header-news__name"> <a href="http://fr.cyberaxe.org/article/what-type-of-database-is-oracle-top-10g">Quel type de base de données est Oracle Top 10g?</a> </div> <div class="header-news__author"> <a href="http://fr.cyberaxe.org/author/ethan-guillot">Ethan Guillot</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://fr.cyberaxe.org/category/oracle-database">Base de données Oracle</a> </div> <div class="header-news__name"> <a href="http://fr.cyberaxe.org/article/how-to-delete-sequence-in-oracle">Comment supprimer la séquence dans Oracle?</a> </div> <div class="header-news__author"> <a href="http://fr.cyberaxe.org/author/nathan-blanc">Nathan Blanc</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://fr.cyberaxe.org/category/golang">golang</a> </div> <div class="header-news__name"> <a href="http://fr.cyberaxe.org/article/how-to-use-the-defer-keyword-in-golang">Comment utiliser le mot-clé de différé dans Golang</a> </div> <div class="header-news__author"> <a href="http://fr.cyberaxe.org/author/celia-girard">Célia Girard</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://fr.cyberaxe.org/category/c">C ++</a> </div> <div class="header-news__name"> <a href="http://fr.cyberaxe.org/article/difference-between--and--operators-in-c">Différence entre + = et = + opérateurs en C ++</a> </div> <div class="header-news__author"> <a href="http://fr.cyberaxe.org/author/julien-dumas">Julien Dumas</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://fr.cyberaxe.org/category/c-sharp">c Sharp</a> </div> <div class="header-news__name"> <a href="http://fr.cyberaxe.org/article/difference-between--operator-and-equals-method-in-c">Différence entre == opérateur et méthode égale en C #?</a> </div> <div class="header-news__author"> <a href="http://fr.cyberaxe.org/author/pauline-giraud">Pauline Giraud</a> </div> </div> </div> </div> </div> </div> <footer> <div class="container"> <div class="footer"> <div class="footer__about">Un site sur le système d'exploitation Linux. Vous trouverez ici de nombreux articles intéressants et des guides utiles</div> <div class="footer__cats"> <ul class="sub-menu"> <li class="menu-item"><a href="http://fr.cyberaxe.org/category/python">Python</a></li> <li class="menu-item"><a href="http://fr.cyberaxe.org/category/postgresql">Postgresql</a></li> <li class="menu-item"><a href="http://fr.cyberaxe.org/category/oracle-linux">Oracle Linux</a></li> <li class="menu-item"><a href="http://fr.cyberaxe.org/category/c">C ++</a></li> <li class="menu-item"><a href="http://fr.cyberaxe.org/category/windows-os">Windows OS</a></li> </li> </ul> </div> <div class="footer__cats"> <ul class="sub-menu"> <li class="menu-item"><a href="http://fr.cyberaxe.org/category/docker">Docker</a></li> <li class="menu-item"><a href="http://fr.cyberaxe.org/category/c-sharp">c Sharp</a></li> <li class="menu-item"><a href="http://fr.cyberaxe.org/category/r">R</a></li> <li class="menu-item"><a href="http://fr.cyberaxe.org/category/oracle-database">Base de données Oracle</a></li> </li> <li class="menu-item"><a href="http://fr.cyberaxe.org/all-categories"><b>Toutes catégories</b></a></li> </ul> </div> </div> </div> </footer> <script src="/assets/artline/js/app.min.js"></script> <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" /> <script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script> <script> window.addEventListener("load", function(){ window.cookieconsent.initialise({ "palette": { "popup": { "background": "#edeff5", "text": "#838391" }, "button": { "background": "#4b81e8" } }, "theme": "classic", "position": "bottom-right" })}); </script> <script> const images = document.querySelectorAll('img'); for (let i = 0; i < images.length; i++) { images[i].onerror = function() { this.src = 'https://cyberaxe.org/storage/img/nophoto.jpg'; } } </script> </body> </html>