Apprenez à bien utiliser l'audio et la vidéo HTML5

HTML5 prend en charge les médias intégrés via les balises HTML « audio » et « vidéo », permettant aux développeurs d'intégrer facilement des médias dans des documents HTML.

Intégrer MediaEDIT

Intégrer un média en HTML :

<video src="http://v2v.cc/~j/theora_testsuite/320x240.ogg" controls>  你的浏览器不支持 <code>video</code> 标签.</video>

Cet exemple montre une vidéo lisible avec un contrôleur de lecture, la vidéo provient du Site Internet de Théora.

Ce qui suit est un exemple d'intégration d'audio dans un document HTML. L'attribut

<audio src="/test/audio.ogg"><p>你的浏览器不支持audio标签</p></audio>

src peut être défini sur l'URL d'un fichier audio ou sur le chemin d'un fichier local.

<audio src="audio.ogg" controls autoplay loop><p>你的浏览器不支持audio标签</p></audio>

Le code de cet exemple utilise certains attributs de l'élément HTML "audio" :

controls : Afficher les contrôles HTML5 standard pour l'audio dans les pages Web.

lecture automatique : faites jouer automatiquement l'audio.

boucle : Faites répéter l'audio automatiquement.

<audio src="audio.mp3" preload="auto" controls></audio>

L'attribut preload est utilisé pour mettre en mémoire tampon les fichiers volumineux contenant des éléments audio. Il y a trois valeurs d'attribut à définir :

"aucun" ne met pas en mémoire tampon les fichiers <🎜. >

<video controls>
  <source src="foo.ogg" type="video/ogg">
  <source src="foo.mp4" type="video/mp4">
  Your browser does not support the <code>video</code> element.</video>

fichier MPEG-4. Consultez la liste des formats multimédias pris en charge par les éléments audio et vidéo pour voir la prise en charge des formats d'encodage vidéo et audio par différents navigateurs.

<video controls>
  <source src="foo.ogg" type="video/ogg; codecs=
dir
ac, speex">
  Your browser does not support the <code>video</code> element.</video>

est envoyé à la balise vidéo. Si l'attribut type est spécifié, il sera comparé aux types que le navigateur peut lire. S'il n'est pas reconnu, le serveur ne sera même pas interrogé, la source suivante sera vérifiée en même temps.

Contrôles de lecture multimédiaEDIT 🎜>Une fois que vous avez intégré le média dans un document HTML à l'aide de nouveaux éléments, vous pouvez les contrôler par programmation en utilisant le code JavaScript

La première ligne sert à récupérer le premier élément vidéo du document en cours, et la ligne suivante appelle le Méthode play() de l'élément, cette méthode est définie dans l'interface qui implémente l'élément multimédia.

var v = document.getElementsByTagName("video")[0];v.play();

Contrôler la lecture, la pause, l'augmentation et la diminution du volume d'un lecteur audio HTML5 est simple :

Terminer le téléchargement multimédia EDIT

<audio id="demo" src="audio.mp3"></audio><p>
  <button 
onclick
="document.getElementById(&#39;demo&#39;).play()">播放声音</button>
  <button onclick="document.getElementById(&#39;demo&#39;).pause()">暂停声音</button>
  <button onclick="document.getElementById(&#39;demo&#39;).volume+=0.1">提高音量</button>
  <button onclick="document.getElementById(&#39;demo&#39;).volume-=0.1">降低音量</button></p>

Arrêter la lecture multimédia est aussi simple que d'appeler la méthode pause(). Cependant, le navigateur continuera à télécharger le média jusqu'à ce que les éléments multimédias soient recyclés par le mécanisme de récupération de place. Voici comment arrêter immédiatement les téléchargements multimédia :

En supprimant l'attribut src de l'élément multimédia (ou en le définissant simplement sur une

vide — — en fonction du navigateur), vous pouvez détruire le décodage interne de l'élément, mettant ainsi fin au téléchargement du média. L'opération removeAttribute() n'est pas propre et la définition de l'attribut 'src' de l'élément

var mediaElement = document.getElementById("myMediaElementID");
mediaElement.pause();
mediaElement.src='';
//or
mediaElement.removeAttribute("src");

Rechercher EDIT dans les médias

Les éléments multimédias prennent en charge le déplacement de la position de lecture actuelle vers un point spécifique du contenu du média. Ceci est accompli en définissant la valeur de la propriété currentTime de l'élément ; voir HTMLMediaElement pour plus de détails sur les propriétés de l'élément. Réglez simplement la durée en secondes pendant laquelle vous souhaitez que la lecture continue.

你可以使用元素的属性seekable来决定媒体目前能查找的范围。它返回一个你可以查找的TimeRanges 时间对象。

var mediaElement = document.getElementById('mediaElementID');
mediaElement.seekable.start();
  // 返回开始时间
   (in seconds)mediaElement.seekable.end();
    // 返回结束时间 (in seconds)mediaElement.currentTime = 122;
     // 设定在 122 secondsmediaElement.played.end();
      // 返回浏览器播放的秒数

标记播放范围EDIT