oujood.com

Jouer des vidéos: Inintégre une vidéo dans un document HTML

Les vidéos peuvent être joués « inline » ou par un « assistant », selon l'élément HTML que vous utilisez.
Insérer une vidéo sur une page web n'était pas chose aisée, car les explorateurs web ne proposaient pas de norme standard pour décrire les fichiers multimédias intégrés tels que les vidéos.

search |

Jouer des vidéos sur un Site Web

Dans ce chapitre, nous allons démontrer quelques-unes des nombreuses façons d'ajouter des vidéos sur les pages web, du dernier élément HTML5 <video> aux populaires vidéos YouTube.


Vidéos en ligne (inline)

Lorsqu'une vidéo est incluse dans une page web on parle de vidéo en ligne (inline).
Si vous prévoyez d'utiliser des vidéos inline dans vos applications web, sachez que beaucoup de gens trouvent la vidéos inline ennuyeux. Notez également que certains utilisateurs pourraient avoir désactivé l'option vidéo inline dans leur navigateur.
Nos meilleurs conseils est d'inclure les vidéos inline seulement dans les pages web où l'utilisateur s'attend à voir une vidéo.
Exemple une page qui s'ouvre après que l'utilisateur a cliqué sur un lien pour voir une vidéo.


À l'aide d'un Assistant (plug-in)

Une demande d'assistance est un programme qui peut être lancé par le navigateur pour exécuter une vidéo. Les demandes d'assistance sont également appelés Plug-Ins.
Les demandes d'assistance peuvent être lancés à l'aide de la balise <embed> ou la balise <object>.
Un grand avantage d'utiliser une application d'assistance, c'est que vous pouvez laisser certains (ou touts) les paramètres du lecteur pour être contrôlé par l'utilisateur.
La plupart applications d’assistance permettent le  contrôle manuel (ou programmés) des paramètres de volume et des fonctions comme rembobiner, pause, stop et jouer.


Utilisation de l'élément HTML5 video

L'élément HTML5, récemment introduit, offre un moyen standard d'intégrer des vidéos dans les pages Web. Cependant, l'élément vidéo est relativement nouveau, mais il fonctionne dans la plupart des navigateurs Web modernes.<video>
L'exemple suivant insère simplement une vidéo dans le document HTML, en utilisant l'ensemble de contrôles par défaut du navigateur, avec une source définie par l'attribut .src

Code : HTML


  Copier le code

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="utf-8">
    <title>Intégrer une vidéo dans une page HTML</title>
</head>
<body>
	<video controls="controls" src="http://www.oujood.com/multimedia/navSpaciale.mp4">
        Votre navigateur ne supporte pas l'élément HTML5 Video.
    </video>
</body>
</html>
Et voici un exemple avec Une vidéo, utilisant le jeu de commandes par défaut du navigateur, avec des sources alternatives.

Code : HTML


  Copier le code

>!DOCTYPE html>
>html lang="fr">
>head>
    >meta charset="utf-8">
    >title>Intégrer une vidéo dans une page HTML>/title>
>/head>
>body>
>video controls="controls">
        >source src="http://www.oujood.com/multimedia/navSpaciale.mp4" type="video/mp4">
        >source src="http://www.oujood.com/multimedia/navSpaciale.ogv" type="video/ogg">
        Votre navigateur ne supporte pas l'élément HTML5 Video.
>/video>
>/body>
>/html>

À l'aide de la balise <embed>

Le but de la balise <embed>  consiste à incorporer des éléments multimédia dans la page web.
Le code suivant affiche un fichier AVI intégré à une page web :

Exemple: fichier AVI intégré à une page web

<embed src="video.avi" />


Note : La balise <embed> est déconseillée.
Le World Wide Web Consortium (W3C) recommandent la balise <object>


À l'aide de la balise <object>

Le but de la balise <object> consiste à incorporer des éléments multimédia dans une page web.
Le code suivant affiche un fichier AVI intégré à une page web :

Exemple: fichier AVI intégré à une page web

<object data="video.avi" type="video/avi" />


Avertissement : L'élément n'est pas largement pris en charge et dépend beaucoup du type de l'objet qui est intégré. Les autres méthodes pourraient être un meilleur choix dans de nombreux cas. Les appareils iPad et iPhone ne peuvent pas afficher les vidéos Flash.<object>


À l'aide d'un lien hypertexte

Si une page web comprend un lien hypertexte vers un fichier multimédia, la plupart des navigateurs utilise une « demande d'assistance » pour lire le fichier.
Le code suivant affiche un lien vers un fichier AVI. Si un utilisateur clique sur le lien, le navigateur va lancer une application d'assistance, comme Windows Media Player pour lire le fichier AVI :

Exemple:Windows Media Player pour lire le fichier AVI

<a href="video.avi">Voir la video</a>


Intégrer les vidéos YouTube dans une page web

C'est le moyen le plus simple et le plus populaire d'intégrer des fichiers vidéo dans les pages Web. Il suffit de télécharger la vidéo sur YouTube et d'insérer le code HTML pour afficher cette vidéo dans votre page Web.
Voici un exemple concret suivi de l'explication de l'ensemble du processus :
Étape 1 : Télécharger la vidéo
Allez sur la page de téléchargement de vidéos de YouTube et suivez les instructions pour télécharger votre vidéo.

Étape 2 : Création du code HTML pour intégrer la vidéo
Lorsque vous ouvrez votre vidéo téléchargée dans YouTube. Parcourez et ouvrez votre vidéo téléchargée dans YouTube.
Recherchez maintenant le bouton de partage qui se trouve juste en dessous de la vidéo.

Lorsque vous cliquez sur le bouton de partage, un panneau de partage s'ouvre et affiche d'autres boutons. Cliquez maintenant sur le bouton Intégrer, qui génère le code HTML permettant d'intégrer directement la vidéo dans les pages Web. Il suffit de copier et de coller ce code dans votre document HTML où vous souhaitez afficher la vidéo et le tour est joué. Par défaut, la vidéo est intégrée dans une iframe.

Voici un exemple de Code : HTML


  Copier le code

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>YouTube Video</title>
</head>
<body>
    <iframe src="https://www.youtube.com/embed/YE7VzlLtp-4?start=96" 
	title="YouTube video player" frameborder="0"  width="560" height="315" 
	allow="accelerometer; autoplay; clipboard-write; encrypted-media; 
	gyroscope; picture-in-picture" allowfullscreen></iframe>
</body>
</html>



Cours precedent:
cours precedent  Navigateur et sons
    Sommaire de :
tutoriel multimédia
 Cours suivant:
Formats  médias de Windows    cours suivant
Par carabde 12 mai 2014

Trafic Booster
hebergement web

SCREEBER - Logiciel de copywriting

SCREEBER - Logiciel de copywriting Augmentez vos résultats en rejoignant les 1600 entrepreneurs qui utilisent Screeber®, le seul logiciel de Copywriting (en français) qui rédige avec vous des textes de vente qui convertissent


HTML5, CSS3, JavaScript pour débutants Tome 1
HTML5, CSS3, JavaScript
pour débutants Tome 1

Premier tome d'une série vidéo dédiée à l'apprentissage des langages HTML, CSS et JavaScript.

Regarder aussi nos cours :

Les sélecteurs

Le tableau résumé de sélecteur de CSS ....

fonction str_word_count, str_word_count

Compte le nombre de mots utilisés dans une chaîne

Se connecter à une base de données

Se connecter à une base de données



Rentabilisez efficacement votre site

Votre soutien nous aide à faire fonctionner le site
Cette page vous a été utile? Partagez la pour nous encourager à continuer. Merci