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 <🎜. >

"auto" met en mémoire tampon les fichiers audio

"metadata" met uniquement en mémoire tampon les métadonnées des fichiers

Vous pouvez utiliser la balise . Par exemple :

<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>

Lorsque le navigateur prend en charge le format Ogg, ce code lira le fichier Ogg. Si le navigateur ne prend pas en charge Ogg, le navigateur lira le

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.

Vous pouvez également spécifier la valeur du codec vidéo requis par le fichier vidéo ; cela permet au navigateur de prendre une décision plus correcte :

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

Ici, nous spécifions la balise vidéo pour utiliser Dirac. et les codecs vidéo Speex. Si le navigateur prend en charge Ogg mais ne prend pas en charge le codec spécifié, la vidéo ne sera pas chargée.

Si l'attribut type n'est pas spécifié, le type de média sera renvoyé au serveur puis vérifié pour voir si le navigateur peut le résoudre, sinon, la source suivante est vérifiée ; Si aucun des éléments source spécifiés n'est disponible, un événement d'erreur

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.

Cliquez sur Événements multimédias pour afficher la liste complète des événements de lecture multimédia. Pour voir les détails sur les formats multimédias pris en charge par les différents navigateurs, cliquez sur Formats multimédias pris en charge par les éléments audio et vidéo.

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

. Par exemple, si vous souhaitez (re)démarrer la lecture, vous pouvez écrire le code suivant :

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

chaîne

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

在给一个

一条指定时间范围的语句：

#t=[starttime][,endtime]

时间值可以被指定为秒数（如浮点数）或者为以冒号分隔时/分/秒格式（像2小时5分钟1秒表示为2:05:01）。

【相关推荐】

1. html/css免费视频教程

2. 教你如何增强H5中video标签在浏览器中的兼容性

3. 详解HTML5展示视频的标准

4. 简述

5. 分析H5网页中video标签中的MP4视频无法播放的缘由

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!