Accueil Web HTML Intégrer vidéo / audio dans une page html

Intégrer vidéo / audio dans une page html

Comment Intégrer vidéo / audio dans une page html : Vous pouvez intégrer facilement un fichier audio ou une séquence vidéo dans votre page Web HTML. La meilleure façon d'ajouter de la vidéo ou du son à votre site web est d'inclure la balise HTML spéciale appelée <embed> . Cette balise, le navigateur lui-même à inclure des contrôles pour le multimédia automatiquement. Vous n'avez pas besoin d'avoir un ActiveX, Java VM, VBScript ou JavaScript pour soutenir cette balise <embed>.

C'est aussi une bonne idée d'inclure la balise pour soutenir les navigateurs qui ne reconnaissent pas la balise <embed> pour afficher une vidéo de votre choix, et <noembed> pour afficher une seule image JPG.Voici un exemple simple pour faire jouer un fichier MIDI:

<embed src="/html/votre-fichier.mid" width="90%" height="50" >
<noembed><img src="/votre-image.gif" ></noembed>
</embed>

Cela va produire le résultat suivant:


Vous pouvez intégrer n'importe quel fichier multimédia a l'aide de l'attribut src. Vous pouvez essayer vous-même en utilisant différents fichiers.

attributs:

  1. Voici la liste des attributs les plus importants pour l'élément embed :
  2. align - Détermine comment aligner l'objet. Il faut soit le centre, à gauche ou à droite.
  3. autostart - Indique si les médias devraient démarrer automatiquement.
  4. loop - Indique si le son doit être joué en boucle pour un certain nombre de fois.
  5. playcount - Indique le nombre de fois pour jouer le son. Cette attribut est l'alternative de la boucle si vous vous utilisez IE.
  6. hidden - Définit si l'objet s'affiche sur la page ou non.
  7. height - Hauteur de l'objet.
  8. width -  Largeur de l'objet.
  9. pluginspage - Indique l'URL pour obtenir le plugin.
  10. name - Nom utilisé pour faire référence à l'objet.
  11. src - URL de fichier multimédia que vous voulez intégrer.  Il pourrait être .Mid, .Wav, .flv, .Mp3,. Avi...).
  12. volume - contrôle le volume du son. Peut être de 0 (off) à 100 (volume maximal).

HTML - format de vidéo supporté :

Animations Flash (. SWF), AVI (. Avi), et MOV (. Mov) types de Fichiers qui sont prise en charge par la balise embed.

  1. . swf - fichiers créés par le programme Macromedia Flash.
  2. . wmv - fichiers vidéo de Microsoft windows.
  3. . mov - fichiers formats Quick Time d'Apple.
  4. .MPEG -. sont les fichiers vidéo créés par Pictures Expert Group mobiles.

Voici un exemple simple pour lire un fichier flash / WMV.

<embed src="/html/votre-fichier.swf" width="90%" height="220" >
<noembed><img src="/votre-image.gif" alt="votre-image.gif" /></noembed>
</embed>

 

<embed src="http://www.coursz.com/video.wmv" width="100%" height="90" type="video/msvideo" autostart="true">

Intégrer un fichier Audio

Vous pouvez utiliser la balise <bgsound> pour faire jouer de la musique en arrière-plan. Cette balise est pour Internet Explorer uniquement. Les autres navigateurs ignorent la balise. Le fichier son est rejouer à chaque fois que l'utilisateur actualise la page affiché.

Cette balise supporte seulement deux attributs loop et src. Ces deux attributs ont la même signification que celle expliquée ci-dessus.

Voici un exemple simple pour jouer un petit fichier MIDI:

<bgsound src="/html/votre-fichier.mid" >
<noembed><img src="/votre-image.gif" alt="votre-image.gif" /></noembed>
</bgsound>

Intégrer un fichier PDF dans un document HTML :

<object data="data/coursz-test.htm" type="application/pdf" 
  width="350" height="250">
  alt : <a href="/data/coursz-test.pdf">coursz-test.pdf</a>
</object>

Intégration d'une vidéo Youtube

Ci-dessous le code personnalisé qui permet aux utilisateurs d'intégrer des vidéos YouTube.

Habituellement, les sites gros Web tels que YouTube nous donnent des codes réutilisable que vous pouvez insérer dans vos documents. Le code de YouTube est comme ceci:

<object width="425" height="350">
  <param name="movie" value="http://www.youtube.com/v/Fx009XlNebI" />
  <param name="wmode" value="transparent" />
  <embed src="http://www.youtube.com/v/Fx009XlNebI"
         type="application/x-shockwave-flash"
         wmode="transparent" width="550" height="400" />
</object>