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="https://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="https://www.oujood.com/multimedia/navSpaciale.mp4" type="video/mp4">
        >source src="https://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

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

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:
Navigateur et sons

Sommaire de :
tutoriel multimédia

Cours suivant:
Formats médias de Windows

Par carabde 12 mai 2014

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

Cours multimédia