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<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>
<video controls> <source src="foo.ogg" type="video/ogg; codecs= dir ac, speex"> Your browser does not support the <code>video</code> element.</video>
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('demo').play()">播放声音</button> <button onclick="document.getElementById('demo').pause()">暂停声音</button> <button onclick="document.getElementById('demo').volume+=0.1">提高音量</button> <button onclick="document.getElementById('demo').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înevide — — 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 时间对象。 标记播放范围EDIT 在给一个 一条指定时间范围的语句: #t=[starttime][,endtime] 时间值可以被指定为秒数(如浮点数)或者为以冒号分隔时/分/秒格式(像2小时5分钟1秒表示为2:05:01)。 【相关推荐】 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!var mediaElement = document.getElementById('mediaElementID');
mediaElement.seekable.start();
// 返回开始时间
(in seconds)mediaElement.seekable.end();
// 返回结束时间 (in seconds)mediaElement.currentTime = 122;
// 设定在 122 secondsmediaElement.played.end();
// 返回浏览器播放的秒数