diff options
Diffstat (limited to 'files/fr/web/api/htmlmediaelement')
10 files changed, 1066 insertions, 0 deletions
diff --git a/files/fr/web/api/htmlmediaelement/abort_event/index.html b/files/fr/web/api/htmlmediaelement/abort_event/index.html new file mode 100644 index 0000000000..05fe0a451a --- /dev/null +++ b/files/fr/web/api/htmlmediaelement/abort_event/index.html @@ -0,0 +1,87 @@ +--- +title: 'HTMLMediaElement: abort event' +slug: Web/API/HTMLMediaElement/abort_event +tags: + - API + - Event + - HTMLMediaElement + - Reference + - Web + - abort +translation_of: Web/API/HTMLMediaElement/abort_event +--- +<div>{{APIRef}}</div> + +<p>L'événement <strong><code>abort</code></strong> se déclenche si l'élément écouté ne s'est pas chargé complétement. Il est désactivé si le résultat obtenu est une erreur.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">Bubbles</th> + <td>No</td> + </tr> + <tr> + <th scope="row">Cancelable</th> + <td>No</td> + </tr> + <tr> + <th scope="row">Interface</th> + <td>{{domxref("Event")}}</td> + </tr> + <tr> + <th scope="row">Event handler property</th> + <td>{{domxref("GlobalEventHandlers/onabort", "onabort")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Exemples">Exemples</h2> + +<pre class="brush: js notranslate">const video = document.querySelector('video'); +const videoSrc = 'https://path/to/video.webm'; + +video.addEventListener('abort', () => { + console.log(`Abort loading: ${videoSrc}`); +}); + +const source = document.createElement('source'); +source.setAttribute('src', videoSrc); +source.setAttribute('type', 'video/webm'); + +video.appendChild(source);</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', "media.html#event-media-abort")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "embedded-content-0.html#event-media-abort")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2> + + + +<p>{{Compat("api.HTMLMediaElement.abort_event")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{domxref("HTMLAudioElement")}}</li> + <li>{{domxref("HTMLVideoElement")}}</li> + <li>{{HTMLElement("audio")}}</li> + <li>{{HTMLElement("video")}}</li> +</ul> diff --git a/files/fr/web/api/htmlmediaelement/canplay_event/index.html b/files/fr/web/api/htmlmediaelement/canplay_event/index.html new file mode 100644 index 0000000000..95fdb08c7e --- /dev/null +++ b/files/fr/web/api/htmlmediaelement/canplay_event/index.html @@ -0,0 +1,80 @@ +--- +title: 'HTMLMediaElement: canplay' +slug: Web/API/HTMLMediaElement/canplay_event +translation_of: Web/API/HTMLMediaElement/canplay_event +--- +<p>L'événement <code>canplay</code> est déclenché lorsque l'<a href="/fr/docs/Glossaire/User_agent">agent utilisateur</a> peut jouer le média, mais estime que trop peu de données ont été chargées pour le jouer jusqu'à la fin sans avoir à l'arrêter pour charger d'avantage de contenu dans la mémoire tampon (buffer).</p> + +<h2 id="Informations_Générales">Informations Générales</h2> + +<dl> + <dt style="float: left; text-align: right; width: 120px;">Spécification</dt> + <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-canplay">HTML5 media</a></dd> + <dt style="float: left; text-align: right; width: 120px;">Interface</dt> + <dd style="margin: 0 0 0 120px;">Event</dd> + <dt style="float: left; text-align: right; width: 120px;">Propagation</dt> + <dd style="margin: 0 0 0 120px;">Non</dd> + <dt style="float: left; text-align: right; width: 120px;">Annulable</dt> + <dd style="margin: 0 0 0 120px;">Non</dd> + <dt style="float: left; text-align: right; width: 120px;">Cible</dt> + <dd style="margin: 0 0 0 120px;">Element</dd> + <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt> + <dd style="margin: 0 0 0 120px;">Aucune</dd> +</dl> + +<h2 id="Propriétés">Propriétés</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Property</th> + <th scope="col">Type</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>target</code> {{readonlyInline}}</td> + <td>{{domxref("EventTarget")}}</td> + <td>The event target (the topmost target in the DOM tree).</td> + </tr> + <tr> + <td><code>type</code> {{readonlyInline}}</td> + <td>{{domxref("DOMString")}}</td> + <td>The type of event.</td> + </tr> + <tr> + <td><code>bubbles</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>Whether the event normally bubbles or not.</td> + </tr> + <tr> + <td><code>cancelable</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>Whether the event is cancellable or not.</td> + </tr> + </tbody> +</table> + +<h2 id="Evénements_liés">Evénements liés</h2> + +<ul> + <li>{{event("playing")}}</li> + <li>{{event("waiting")}}</li> + <li>{{event("seeking")}}</li> + <li>{{event("seeked")}}</li> + <li>{{event("ended")}}</li> + <li>{{event("loadedmetadata")}}</li> + <li>{{event("loadeddata")}}</li> + <li>{{event("canplay")}}</li> + <li>{{event("canplaythrough")}}</li> + <li>{{event("durationchange")}}</li> + <li>{{event("timeupdate")}}</li> + <li>{{event("play")}}</li> + <li>{{event("pause")}}</li> + <li>{{event("ratechange")}}</li> + <li>{{event("volumechange")}}</li> + <li>{{event("suspend")}}</li> + <li>{{event("emptied")}}</li> + <li>{{event("stalled")}}</li> +</ul> diff --git a/files/fr/web/api/htmlmediaelement/canplaythrough_event/index.html b/files/fr/web/api/htmlmediaelement/canplaythrough_event/index.html new file mode 100644 index 0000000000..9a67a55a00 --- /dev/null +++ b/files/fr/web/api/htmlmediaelement/canplaythrough_event/index.html @@ -0,0 +1,80 @@ +--- +title: 'HTMLMediaElement: canplaythrough' +slug: Web/API/HTMLMediaElement/canplaythrough_event +translation_of: Web/API/HTMLMediaElement/canplaythrough_event +--- +<p>L'événement <code><strong>canplaythrough</strong></code> est déclenché lorsque le user agent peut jouer le média et estime que suffisament de données ont été chargées pour le lire jusqu'au bout. (Sans s'arrêter afin de charger plus contenu en mémoire)</p> + +<h2 id="Informations_générales">Informations générales</h2> + +<dl> + <dt style="float: left; text-align: right; width: 120px;">Spécification</dt> + <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-canplaythrough">HTML5 media</a></dd> + <dt style="float: left; text-align: right; width: 120px;">Interface</dt> + <dd style="margin: 0 0 0 120px;">Event</dd> + <dt style="float: left; text-align: right; width: 120px;">Propagation</dt> + <dd style="margin: 0 0 0 120px;">Non</dd> + <dt style="float: left; text-align: right; width: 120px;">Annulable</dt> + <dd style="margin: 0 0 0 120px;">Non</dd> + <dt style="float: left; text-align: right; width: 120px;">Cible</dt> + <dd style="margin: 0 0 0 120px;">Element</dd> + <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt> + <dd style="margin: 0 0 0 120px;">Aucune</dd> +</dl> + +<h2 id="Propriétés">Propriétés</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Property</th> + <th scope="col">Type</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>target</code> {{readonlyInline}}</td> + <td>{{domxref("EventTarget")}}</td> + <td>The event target (the topmost target in the DOM tree).</td> + </tr> + <tr> + <td><code>type</code> {{readonlyInline}}</td> + <td>{{domxref("DOMString")}}</td> + <td>The type of event.</td> + </tr> + <tr> + <td><code>bubbles</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>Whether the event normally bubbles or not.</td> + </tr> + <tr> + <td><code>cancelable</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>Whether the event is cancellable or not.</td> + </tr> + </tbody> +</table> + +<h2 id="Evénements_liés">Evénements liés</h2> + +<ul> + <li>{{event("playing")}}</li> + <li>{{event("waiting")}}</li> + <li>{{event("seeking")}}</li> + <li>{{event("seeked")}}</li> + <li>{{event("ended")}}</li> + <li>{{event("loadedmetadata")}}</li> + <li>{{event("loadeddata")}}</li> + <li>{{event("canplay")}}</li> + <li>{{event("canplaythrough")}}</li> + <li>{{event("durationchange")}}</li> + <li>{{event("timeupdate")}}</li> + <li>{{event("play")}}</li> + <li>{{event("pause")}}</li> + <li>{{event("ratechange")}}</li> + <li>{{event("volumechange")}}</li> + <li>{{event("suspend")}}</li> + <li>{{event("emptied")}}</li> + <li>{{event("stalled")}}</li> +</ul> diff --git a/files/fr/web/api/htmlmediaelement/capturestream/index.html b/files/fr/web/api/htmlmediaelement/capturestream/index.html new file mode 100644 index 0000000000..75a73c45f9 --- /dev/null +++ b/files/fr/web/api/htmlmediaelement/capturestream/index.html @@ -0,0 +1,94 @@ +--- +title: HTMLMediaElement.captureStream() +slug: Web/API/HTMLMediaElement/captureStream +tags: + - API + - Audio + - HTML DOM + - HTMLMediaElement + - Media + - Media Capture DOM Elements + - Method + - Reference + - Video + - captureStream +translation_of: Web/API/HTMLMediaElement/captureStream +--- +<div>{{APIRef("HTML Media Capture")}}</div> + +<p><strong><code>captureStream()</code></strong> est une méthode de l'interface {{domxref("HTMLMediaElement")}} retournant un objet {{domxref('MediaStream')}} qui diffuse en temps réel l'enregistrement d'un contenu obtenu dans un élément média.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">var <em>mediaStream</em> = mediaElement.captureStream()</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<p>Aucun.</p> + +<h3 id="Retours">Retours</h3> + +<p>Un objet {{domxref('MediaStream')}} pouvant être utilisé en tant que source pour des données audio et/ou vidéo par d'autres média traitant du code, ou comme source pour <a href="/en-US/docs/Glossary/WebRTC">WebRTC</a>.</p> + +<h2 id="Exemple">Exemple</h2> + +<p>Dans cet exemple, un écouteur d'événement est mise en place, permettant la capture du contenu d'un élément média avec l'ID <code>"playback"</code> dans un {{domxref("MediaStream")}} lors d'un clic sur un bouton de lancement. La flux peut être utilisée dans d'autres buts—comme une source de diffusion via WebRTC, vous permettant de partager des vidéos pré-enregistrées avec une autre personne lors d'un appel video.</p> + +<pre class="brush: js">document.querySelector('.playAndRecord').addEventListener('click', function() { + var playbackElement = document.getElementById("playback"); + var captureStream = playbackElement.captureStream(); + playbackElement.play(); +}); +</pre> + +<p>Voir <a href="/en-US/docs/Web/API/MediaStream_Recording_API/Recording_a_media_element">Recording a media element</a> pour des exemples et explications plus détaillées et complexes.</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Status</th> + <th scope="col">Commentaire</th> + </tr> + <tr> + <td>{{SpecName('Media Capture DOM Elements','#widl-HTMLMediaElement-captureStream-MediaStream','captureStream()')}}</td> + <td>{{Spec2('Media Capture DOM Elements')}}</td> + <td>Déclaration initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilités">Compatibilités</h2> + +<div> + + +<p>{{Compat("api.HTMLMediaElement.captureStream")}}</p> + +<h3 id="Firefox-notes_spécifiques">Firefox-notes spécifiques</h3> +</div> + +<p>Avant Firefox 51, vous ne pouviez pas utiliser <code>captureStream()</code> sur un élément média dont la source était, lui-même, un objet {{domxref("MediaStream")}} (comme un élément {{HTMLElement("video")}} présentant un flux reçu à travers un {{domxref("RTCPeerConnection")}}). Au commencement de 51, ça fonctionne. ce qui veut dire que vous pouvez capturer le flux d'un élément video et utiliser {{domxref("MediaRecorder")}} pour l'enregistrer. Voir {{bug(1259788)}} pour plus de détails.</p> + +<p>Cependant, <code>captureStream()</code> reste préfixé <code>mozCaptureStream()</code> sur Firefox pour une bonne raison: il y a quelques etrangetés dans l'implémentation actuelle qui mérite d'être soulignées :</p> + +<ul> + <li>Actuellement, l'implémentation de Firefox fonctionne uniquement (comme décrit dans les spécifications) quand la source de l'élément média est elle-même, donc une instance {{domxref("MediaStream")}}.</li> + <li>Si la source de l'élément média n'est pas un <code>MediaStream</code>, la sortie de cette méthode n'est pas compatible avec les spécifications, et si vous changez la source après avoir commencé la capture, la sortie de la capture du flux ne peut accepter les nouvelles données source suite à une incompatibilité, donc aucun {{domxref("MediaStreamTrack")}}s sera ajouté de la nouvelle source <code>MediaStream</code> au flux capturé, résultant d'une sortie n'ayant pas capturé la source mise à jour.</li> + <li>Repasser la source en <code>MediaStream</code> ajoute des pistes au flux et fonctionne de nouveau comme prévu.</li> + <li>L'appel à <code>mozCaptureMediaStream()</code> sur un élément avec une source <code>MediaStream</code> retourne un flux qui contient uniquement les pistes jouées par un <code>MediaStream</code>.</li> + <li>Si vous appellez <code>mozCaptureMediaStream()</code> sur un élément média sans source, son mode de compatibilité va se baser sur la première source ayant été ajoutée; Par exemple, Si c'est un <code>MediaStream</code>, alors la capture du flux va seulement fonctionner avec une source MediaStream à partir de ce moment.</li> + <li>Ce comportement particulier va être supprimer un fois que le support des sources non-<code>MediaStream</code> aura atteint la spécification et que la méthode ne sera plus préfixée. Voir {{bug(1259788, "bug", 160)}} pour plus de détails.</li> +</ul> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/MediaStream_Recording_API/Recording_a_media_element">Recording a media element</a></li> + <li><a href="/en-US/docs/Web/API/MediaStream_Recording_API">MediaStream Recording API</a></li> + <li>{{domxref("HTMLCanvasElement.captureStream()")}}</li> + <li>{{domxref("MediaStream")}}</li> + <li><a href="/en-US/docs/Web/API/WebRTC_API">WebRTC API</a></li> +</ul> diff --git a/files/fr/web/api/htmlmediaelement/durationchange_event/index.html b/files/fr/web/api/htmlmediaelement/durationchange_event/index.html new file mode 100644 index 0000000000..0c5573379c --- /dev/null +++ b/files/fr/web/api/htmlmediaelement/durationchange_event/index.html @@ -0,0 +1,80 @@ +--- +title: 'HTMLMediaElement: durationchange' +slug: Web/API/HTMLMediaElement/durationchange_event +translation_of: Web/API/HTMLMediaElement/durationchange_event +--- +<p>L'évènement <strong><code>durationchange</code> </strong>est déclenché quand l'attribut de durée est mis à jour.</p> + +<h2 id="Informations_générales">Informations générales</h2> + +<dl> + <dt style="float: left; text-align: right; width: 120px;">Spécification</dt> + <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-durationchange">HTML5 media</a></dd> + <dt style="float: left; text-align: right; width: 120px;">Interface</dt> + <dd style="margin: 0 0 0 120px;">{{domxref("Event")}}</dd> + <dt style="float: left; text-align: right; width: 120px;">Propagation</dt> + <dd style="margin: 0 0 0 120px;">Non</dd> + <dt style="float: left; text-align: right; width: 120px;">Annulable</dt> + <dd style="margin: 0 0 0 120px;">Non</dd> + <dt style="float: left; text-align: right; width: 120px;">Cible</dt> + <dd style="margin: 0 0 0 120px;">{{domxref("Element")}}</dd> + <dt style="float: left; text-align: right; width: 120px;">Default Action</dt> + <dd style="margin: 0 0 0 120px;">Aucune.</dd> +</dl> + +<h2 id="Propriétés">Propriétés</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Property</th> + <th scope="col">Type</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>target</code> {{readonlyInline}}</td> + <td>{{domxref("EventTarget")}}</td> + <td>The event target (the topmost target in the DOM tree).</td> + </tr> + <tr> + <td><code>type</code> {{readonlyInline}}</td> + <td>{{domxref("DOMString")}}</td> + <td>The type of event.</td> + </tr> + <tr> + <td><code>bubbles</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>Whether the event normally bubbles or not.</td> + </tr> + <tr> + <td><code>cancelable</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>Whether the event is cancellable or not.</td> + </tr> + </tbody> +</table> + +<h2 id="Evénements_liés">Evénements liés</h2> + +<ul> + <li>{{event("playing")}}</li> + <li>{{event("waiting")}}</li> + <li>{{event("seeking")}}</li> + <li>{{event("seeked")}}</li> + <li>{{event("ended")}}</li> + <li>{{event("loadedmetadata")}}</li> + <li>{{event("loadeddata")}}</li> + <li>{{event("canplay")}}</li> + <li>{{event("canplaythrough")}}</li> + <li>{{event("durationchange")}}</li> + <li>{{event("timeupdate")}}</li> + <li>{{event("play")}}</li> + <li>{{event("pause")}}</li> + <li>{{event("ratechange")}}</li> + <li>{{event("volumechange")}}</li> + <li>{{event("suspend")}}</li> + <li>{{event("emptied")}}</li> + <li>{{event("stalled")}}</li> +</ul> diff --git a/files/fr/web/api/htmlmediaelement/emptied_event/index.html b/files/fr/web/api/htmlmediaelement/emptied_event/index.html new file mode 100644 index 0000000000..d550ba2b11 --- /dev/null +++ b/files/fr/web/api/htmlmediaelement/emptied_event/index.html @@ -0,0 +1,80 @@ +--- +title: 'HTMLMediaElement: emptied' +slug: Web/API/HTMLMediaElement/emptied_event +translation_of: Web/API/HTMLMediaElement/emptied_event +--- +<p>L'événement <strong><code>emptied</code></strong> est déclenché lorsqu'un média est devenu vide. Par exemple, cet événement est envoyé si le média a déjà été chargé (complètement ou partiellement), et que la méthode <em>load() </em>est appelé pour le recharger.</p> + +<h2 id="Informations_générales">Informations générales</h2> + +<dl> + <dt style="float: left; text-align: right; width: 120px;">Spécification</dt> + <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-emptied">HTML5 media</a></dd> + <dt style="float: left; text-align: right; width: 120px;">Interface</dt> + <dd style="margin: 0 0 0 120px;">{{domxref("Event")}}</dd> + <dt style="float: left; text-align: right; width: 120px;">propagation</dt> + <dd style="margin: 0 0 0 120px;">Non</dd> + <dt style="float: left; text-align: right; width: 120px;">Annulable</dt> + <dd style="margin: 0 0 0 120px;">Non</dd> + <dt style="float: left; text-align: right; width: 120px;">Cible</dt> + <dd style="margin: 0 0 0 120px;">{{domxref("Element")}}</dd> + <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt> + <dd style="margin: 0 0 0 120px;">Aucune</dd> +</dl> + +<h2 id="Propriétés">Propriétés</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Property</th> + <th scope="col">Type</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>target</code> {{readonlyInline}}</td> + <td>{{domxref("EventTarget")}}</td> + <td>The event target (the topmost target in the DOM tree).</td> + </tr> + <tr> + <td><code>type</code> {{readonlyInline}}</td> + <td>{{domxref("DOMString")}}</td> + <td>The type of event.</td> + </tr> + <tr> + <td><code>bubbles</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>Whether the event normally bubbles or not.</td> + </tr> + <tr> + <td><code>cancelable</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>Whether the event is cancellable or not.</td> + </tr> + </tbody> +</table> + +<h2 id="Evénements_liés">Evénements liés</h2> + +<ul> + <li>{{event("playing")}}</li> + <li>{{event("waiting")}}</li> + <li>{{event("seeking")}}</li> + <li>{{event("seeked")}}</li> + <li>{{event("ended")}}</li> + <li>{{event("loadedmetadata")}}</li> + <li>{{event("loadeddata")}}</li> + <li>{{event("canplay")}}</li> + <li>{{event("canplaythrough")}}</li> + <li>{{event("durationchange")}}</li> + <li>{{event("timeupdate")}}</li> + <li>{{event("play")}}</li> + <li>{{event("pause")}}</li> + <li>{{event("ratechange")}}</li> + <li>{{event("volumechange")}}</li> + <li>{{event("suspend")}}</li> + <li>{{event("emptied")}}</li> + <li>{{event("stalled")}}</li> +</ul> diff --git a/files/fr/web/api/htmlmediaelement/ended_event/index.html b/files/fr/web/api/htmlmediaelement/ended_event/index.html new file mode 100644 index 0000000000..742ad75319 --- /dev/null +++ b/files/fr/web/api/htmlmediaelement/ended_event/index.html @@ -0,0 +1,98 @@ +--- +title: 'HTMLMediaElement: ended' +slug: Web/API/HTMLMediaElement/ended_event +translation_of: Web/API/HTMLMediaElement/ended_event +--- +<p>L'événement <strong>ended</strong> est déclenché lorsque la lecture ou le streaming s'est arrêté parce que la fin du média a été atteinte ou qu'aucune donnée n'est disponible.</p> + +<p>L'événement se produit dans deux contextes liés mais unique:</p> + +<ul> + <li>Les éléments basés sur {{domxref("HTMLMediaElement")}} ({{HTMLElement("audio")}} et {{HTMLElement("video")}}) déclenchent <strong>ended</strong> lorsque la lecture du média atteint la fin.</li> + <li>Les pistes de flux média, qui sont basées sur l'interface {{domxref("MediaStreamTrack")}}, déclenchent <strong><code>ended</code></strong> lorsque <span id="result_box" lang="fr"><span>la source de la piste interrompt définitivement l'envoi de données sur le flux. Il y'a différentes manières d'y arriver</span></span>: + <ul> + <li>il n'y a plus de données à envoyer.</li> + <li>L'utilisateur a <span id="result_box" lang="fr"><span>révoqué les autorisations nécessaires pour que les données soient envoyées</span></span>.</li> + <li><span id="result_box" lang="fr"><span>Le matériel générant les données source a été supprimé ou éjecté</span></span>.</li> + <li><span id="result_box" lang="fr"><span>Un peer distant a définitivement cessé d'envoyer des données.</span> <span>La mise en pause des médias ne génère pas l'événement <strong>ended</strong></span></span>.</li> + </ul> + </li> +</ul> + +<h2 id="Informations_générales">Informations générales</h2> + +<dl> + <dt style="float: left; text-align: right; width: 120px;">Spécification</dt> + <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-ended">HTML5 media</a> et <a href="https://www.w3.org/TR/mediacapture-streams/#event-mediastreamtrack-ended">Media Capture and Streams</a></dd> + <dt style="float: left; text-align: right; width: 120px;">Interface</dt> + <dd style="margin: 0 0 0 120px;">{{domxref("Event")}}</dd> + <dt style="float: left; text-align: right; width: 120px;">Propagation</dt> + <dd style="margin: 0 0 0 120px;">Non</dd> + <dt style="float: left; text-align: right; width: 120px;">Annulable</dt> + <dd style="margin: 0 0 0 120px;">Non</dd> + <dt style="float: left; text-align: right; width: 120px;">Cible</dt> + <dd style="margin: 0 0 0 120px;">{{domxref("Element")}}</dd> + <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt> + <dd style="margin: 0 0 0 120px;">Aucune</dd> +</dl> + +<div class="note"> +<p><span id="result_box" lang="fr"><span>Bien que cet événement soit défini dans deux spécifications, à ce moment-là, les deux spécifient cet événement de manière identique, nous avons donc documenté comme si elles ne faisaient qu'une.</span> <span>Si à un moment donné, cela change, la documentation sera révisée.</span></span></p> +</div> + +<h2 id="Propriétés">Propriétés</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Property</th> + <th scope="col">Type</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>target</code> {{readonlyInline}}</td> + <td>{{domxref("EventTarget")}}</td> + <td>The event target (the topmost target in the DOM tree).</td> + </tr> + <tr> + <td><code>type</code> {{readonlyInline}}</td> + <td>{{domxref("DOMString")}}</td> + <td>The type of event.</td> + </tr> + <tr> + <td><code>bubbles</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>Whether the event normally bubbles or not.</td> + </tr> + <tr> + <td><code>cancelable</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>Whether the event is cancellable or not.</td> + </tr> + </tbody> +</table> + +<h2 id="Evénements_liés">Evénements liés</h2> + +<ul> + <li>{{event("playing")}}</li> + <li>{{event("waiting")}}</li> + <li>{{event("seeking")}}</li> + <li>{{event("seeked")}}</li> + <li>{{event("ended")}}</li> + <li>{{event("loadedmetadata")}}</li> + <li>{{event("loadeddata")}}</li> + <li>{{event("canplay")}}</li> + <li>{{event("canplaythrough")}}</li> + <li>{{event("durationchange")}}</li> + <li>{{event("timeupdate")}}</li> + <li>{{event("play")}}</li> + <li>{{event("pause")}}</li> + <li>{{event("ratechange")}}</li> + <li>{{event("volumechange")}}</li> + <li>{{event("suspend")}}</li> + <li>{{event("emptied")}}</li> + <li>{{event("stalled")}}</li> +</ul> diff --git a/files/fr/web/api/htmlmediaelement/index.html b/files/fr/web/api/htmlmediaelement/index.html new file mode 100644 index 0000000000..d5d7e48c46 --- /dev/null +++ b/files/fr/web/api/htmlmediaelement/index.html @@ -0,0 +1,238 @@ +--- +title: HTMLMediaElement +slug: Web/API/HTMLMediaElement +tags: + - API + - Audio + - DOM + - Interface + - Media + - Video +translation_of: Web/API/HTMLMediaElement +--- +<p>{{APIRef("HTML DOM")}}</p> + +<p>L'interface <strong><code>HTMLMediaElement</code></strong> ajoute à {{domxref("HTMLElement")}} les propriétés et les méthodes nécessaires pour prendre en charge les fonctionnalités de base liées aux médias qui sont communes aux vidéos et aux documents audios. {{domxref("HTMLVideoElement")}} et {{domxref("HTMLAudioElement")}} héritent de cette interface.</p> + +<h2 id="Propriétés">Propriétés</h2> + +<p><em>Cette interface hérite aussi des propriétés de ses ancêtres </em><em>{{domxref("HTMLElement")}}, {{domxref("Element")}}, {{domxref("Node")}} et {{domxref("EventTarget")}}.</em></p> + +<dl> + <dt>{{domxref("HTMLMediaElement.audioTracks")}}</dt> + <dd>est une {{domxref("AudioTrackList")}} qui liste les objets {{domxref("AudioTrack")}} (<em>pistes audio</em>) contenus dans l'élément.</dd> + <dt>{{domxref("HTMLMediaElement.autoplay")}}</dt> + <dd>est un {{jsxref("Boolean")}} qui reflète l'attribut HTML {{htmlattrxref("autoplay","video")}}, indiquant si la lecture doit commencer automatiquement dès que suffisamment de médias sont disponibles pour le faire sans interruption.</dd> + <dd> + <div class="note"> + <p>Les sites qui lisent automatiquement l'audio (ou les vidéos avec une piste audio) peuvent être désagréables pour les utilisateurs, il faut donc l'éviter autant que possible. Si vous devez offrir la fonctionnalité de lecture automatique, vous devez la faire activer (par un utilisateur qui la lance expréssement). Cependant, cela peut être utile lors de la création d'éléments média dont la source sera définie ultérieurement, sous le contrôle de l'utilisateur.</p> + </div> + </dd> + <dt>{{domxref("HTMLMediaElement.buffered")}}{{readonlyinline}}</dt> + <dd>Renvoie un objet {{domxref("TimeRanges")}} qui indique les plages de la source du média que le navigateur a en mémoire tampon (le cas échéant) au moment de l'accès à la propriété <code>buffered</code>.</dd> + <dt>{{domxref("HTMLMediaElement.controller")}}</dt> + <dd>est un objet {{domxref("MediaController")}} qui représente le contrôleur du média assigné à l'élément, ou <code>null</code> si aucun n'est défini.</dd> + <dt>{{domxref("HTMLMediaElement.controls")}}</dt> + <dd>est un {{jsxref('Boolean')}} qui reflète l'attribut HTML {{htmlattrxref("controls","video")}}, indiquant quels éléments de contrôle de ressource de l'interface utilisateur doivent être affichés.</dd> + <dt>{{domxref("HTMLMediaElement.controlsList")}} {{readonlyinline}}</dt> + <dd>renvoie une {{domxref("DOMTokenList")}} qui aide l'agent utilisateur à sélectionner les contrôles à afficher sur l'élément du média chaque fois que l'agent utilisateur affiche son propre jeu de contrôles. La <code>DOMTokenList</code> prend une ou plusieurs des trois valeurs possibles : <code>nodownload</code>, <code>nofullscreen</code> et <code>noremoteplayback</code>.</dd> + <dt>{{domxref("HTMLMediaElement.crossOrigin")}}</dt> + <dd>est une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) indiquant les <a href="https://developer.mozilla.org/fr/docs/Web/HTML/Reglages_des_attributs_CORS">règlages CORS</a> pour cet élément de média.</dd> + <dt>{{domxref("HTMLMediaElement.currentSrc")}}{{readonlyinline}}</dt> + <dd>Renvoie une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) avec l'URL absolue de la ressource de média choisie.</dd> + <dt>{{domxref("HTMLMediaElement.currentTime")}}</dt> + <dd>est un <code>double</code> indiquant le temps de lecture actuel en secondes. La définition de cette valeur recherche le média à la nouvelle heure.</dd> + <dt>{{domxref("HTMLMediaElement.defaultMuted")}}</dt> + <dd>est un {{jsxref('Boolean')}} qui reflète l'attribut HTML {{htmlattrxref("muted","video")}}, qui indique si la sortie audio de l'élément média doit être désactivée par défaut.</dd> + <dt>{{domxref("HTMLMediaElement.defaultPlaybackRate")}}</dt> + <dd>est un <code>double</code> indiquant le taux de lecture par défaut pour le média.</dd> + <dt>{{domxref("HTMLMediaElement.disableRemotePlayback")}}</dt> + <dd>est un {{jsxref('Boolean')}} qui définit ou retourne l'état de lecture à distance, indiquant si l'élément de média est autorisé à avoir une interface de lecture à distance.</dd> + <dt>{{domxref("HTMLMediaElement.duration")}}{{readonlyinline}}</dt> + <dd>renvoie un <code>double</code> indiquant la longueur du média en secondes, ou 0 si aucune donnée multimédia n'est disponible.</dd> + <dt>{{domxref("HTMLMediaElement.ended")}}{{readonlyinline}}</dt> + <dd>renvoie un {{jsxref('Boolean')}} qui indique si l'élément média est terminé.</dd> + <dt>{{domxref("HTMLMediaElement.error")}}{{readonlyinline}}</dt> + <dd>renvoie un objet {{domxref("MediaError")}} pour l'erreur la plus récente, ou <code>null</code> s'il n'y a pas eu d'erreur.</dd> + <dt>{{domxref("HTMLMediaElement.loop")}}</dt> + <dd>est un {{jsxref('Boolean')}} qui reflète l'attribut HTML {{htmlattrxref("loop","video")}} (<em>boucle</em>), lequel indique si l'élément média doit recommencer quand il arrive à la fin.</dd> + <dt>{{domxref("HTMLMediaElement.mediaGroup")}}</dt> + <dd>est une {{domxref("DOMString")}} qui reflète l'attribut HTML {{htmlattrxref("mediagroup","video")}}, lequel indique le nom du groupe d'éléments auquel il appartient. Un groupe d'éléments média partage un {{domxref('MediaController')}} commun.</dd> + <dt>{{domxref("HTMLMediaElement.mediaKeys")}}{{readonlyinline}} {{experimental_inline}}</dt> + <dd>Renvoie un objet {{domxref("MediaKeys")}} ou <code>null</code>. <code>MediaKeys</code> est un ensemble de clés qu'un élément <code>HTMLMediaElement</code> associé peut utiliser pour déchiffrer les données du média pendant la lecture.</dd> + <dt>{{domxref("HTMLMediaElement.mozAudioCaptured")}}{{readonlyinline}} {{non-standard_inline}}</dt> + <dd>renvoie un {{jsxref('Boolean')}}. Lié à la capture de flux audio.</dd> + <dt>{{domxref("HTMLMediaElement.mozFragmentEnd")}} {{non-standard_inline}}</dt> + <dd>est un <code>double</code> qui donne accès à l'heure de fin du fragment si l'élément média a un fragment URI pour <code>currentSrc</code>, sinon il est égal à la durée du média.</dd> + <dt>{{domxref("HTMLMediaElement.mozFrameBufferLength")}} {{non-standard_inline}} {{deprecated_inline}}</dt> + <dd> + <p>est un <code>unsigned long</code> qui indique le nombre d'échantillons qui seront renvoyés dans le "framebuffer" de chaque évènement <code>MozAudioAvailable</code>. Ce nombre est un total pour tous les canaux, et par défaut est défini par le nombre de canaux * 1024 (c'est-à-dire, 2 canaux * 1024 échantillons = total 2048).</p> + + <p>La propriété <code>mozFrameBufferLength</code> peut être définie à une nouvelle valeur pour une latence plus faible, de plus grandes quantités de données, etc. La taille donnée <em>doit</em> être un nombre compris entre 512 et 16384. L'utilisation d'autres tailles entraîne la levée d'une exception. Le meilleur moment pour définir une nouvelle longueur est après le lancement de l'évènement <a href="/en-US/docs/Web/Events/loadedmetadata">loadedmetadata</a>, lorsque l'information audio est connue, mais avant que l'audio ait commencé ou que les événements <code>MozAudioAvailable</code> aient commencé à se déclencher.</p> + </dd> + <dt>{{domxref("HTMLMediaElement.mozSampleRate")}}{{readonlyinline}} {{non-standard_inline}} {{deprecated_inline}}</dt> + <dd>renvoie un <code>double</code> représentant le nombre d'échantillons par seconde. Par exemple, 44100 échantillons par seconde correspondent à la fréquence d'échantillonnage utilisée par les CD audio.</dd> + <dt>{{domxref("HTMLMediaElement.muted")}}</dt> + <dd>est un {{jsxref('Boolean')}} qui détermine si l'audio est coupé. <code>true</code> (<em>vrai</em>) si l'audio est coupé et <code>false</code> (<em>faux</em>) sinon.</dd> + <dt>{{domxref("HTMLMediaElement.networkState")}}{{readonlyinline}}</dt> + <dd>renvoie un <code>unsigned short</code> (énumération) indiquant l'état actuel de récupération du média sur le réseau.</dd> + <dt>{{domxref("HTMLMediaElement.paused")}}{{readonlyinline}}</dt> + <dd>renvoie un {{jsxref('Boolean')}} qui indique si l'élément média est en pause.</dd> + <dt>{{domxref("HTMLMediaElement.playbackRate")}}</dt> + <dd>est un <code>double</code> qui indique la vitesse à laquelle le média est lu.</dd> + <dt>{{domxref("HTMLMediaElement.played")}}{{readonlyinline}}</dt> + <dd>renvoie un objet {{domxref('TimeRanges')}} qui contient les plages de la source média que le navigateur a lu, le cas échéant.</dd> + <dt>{{domxref("HTMLMediaElement.preload")}}</dt> + <dd>est une {{domxref("DOMString")}} (<em>chaîne</em>) qui reflète l'attribut HTML {{htmlattrxref("preload","video")}}, indiquant quelles données doivent être préchargées, le cas échéant. Les valeurs possibles sont : <code>none</code>, <code>metadata</code>, <code>auto</code>.</dd> + <dt>{{domxref("HTMLMediaElement.preservesPitch")}} {{non-standard_inline}}</dt> + <dd>est un {{jsxref('Boolean')}} qui détermine si la hauteur du son sera préservée. S'il est défini à <code>false</code> (<em>faux</em>), la hauteur du son s'ajustera à la vitesse de l'audio. C'est implémenté avec préfixe dans Firefox (<code>mozPreservesPitch</code>) et WebKit (<code>webkitPreservesPitch</code>).</dd> + <dt>{{domxref("HTMLMediaElement.readyState")}}{{readonlyinline}}</dt> + <dd>Renvoie un <code>unsigned short</code> (énumération) indiquant l'état de préparation des médias.</dd> + <dt>{{domxref("HTMLMediaElement.seekable")}}{{readonlyinline}}</dt> + <dd>Renvoie un objet {{domxref('TimeRanges')}} qui contient les plages de temps que l'utilisateur peut rechercher, le cas échéant.</dd> + <dt>{{domxref("HTMLMediaElement.seeking")}}{{readonlyinline}}</dt> + <dd>Renvoie un {{jsxref('Boolean')}} qui indique si les médias sont en train de chercher une nouvelle position.</dd> + <dt>{{domxref("HTMLMediaElement.sinkId")}}{{readonlyinline}} {{experimental_inline}}</dt> + <dd>Renvoie une {{domxref("DOMString")}} (<em>chaîne</em>) qui est l'identifiant unique du périphérique audio de sortie, ou une chaîne vide s'il utilise l'agent utilisateur par défaut. Cet identifiant doit être l'une des valeurs <code>MediaDeviceInfo.deviceid</code> retournées par {{domxref("MediaDevices.enumeratedDevices()")}}, <code>id-multimedia</code> ou <code>id-communications</code>.</dd> + <dt>{{domxref("HTMLMediaElement.src")}}</dt> + <dd>est une {{domxref("DOMString")}} qui reflète l'attribut HTML {{htmlattrxref("src","video")}}, lequel contient l'URL d'une ressource média à utiliser.</dd> + <dt>{{domxref("HTMLMediaElement.srcObject")}}</dt> + <dd>est un {{domxref('MediaStream')}} représentant le média à lire ou qui a joué dans le <code>HTMLMediaElement</code> courant, ou <code>null</code> s'il n'est pas assigné.</dd> + <dt>{{domxref("HTMLMediaElement.textTracks")}}{{readonlyinline}}</dt> + <dd>Renvoie la liste d'objets {{domxref("TextTrack")}} (<em>piste de texte</em>) contenus dans l'élément.</dd> + <dt>{{domxref("HTMLMediaElement.videoTracks")}}{{readonlyinline}}</dt> + <dd>Renvoie la liste d'objets {{domxref("VideoTrack")}} (<em>pistes vidéo</em>) contenus dans l'élément. + <div class="note"> + <p><strong>Note : </strong>Gecko ne prend en charge que la lecture d'une seule piste et l'analyse des métadonnées des pistes n'est disponible que pour les médias avec le format de conteneur Ogg.</p> + </div> + </dd> + <dt>{{domxref("HTMLMediaElement.volume")}}</dt> + <dd>est un <code>double</code> indiquant le volume audio, de 0.0 (silence) à 1.0 (le plus fort).</dd> +</dl> + +<h3 id="Gestionnaires_dévènements">Gestionnaires d'évènements</h3> + +<dl> + <dt>{{domxref("HTMLMediaElement.onencrypted")}}</dt> + <dd>définit le {{domxref('EventHandler')}} (<em>gestionnaire d'évènements</em>) appelé quand le média est encrypté.</dd> + <dt>{{domxref("HTMLMediaElement.onwaitingforkey")}}</dt> + <dd>définit le {{domxref('EventHandler')}} (<em>gestionnaire d'évènements</em>) appelé quand la lecture est bloquée en attente d'une clé de chiffrement.</dd> +</dl> + +<h2 id="Attributs_obsolètes">Attributs obsolètes</h2> + +<p>Ces attributs sont obsolètes et ne doivent plus être utilisés, même si un navigateur les prend encore en charge.</p> + +<dl> + <dt>{{domxref("HTMLMediaElement.initialTime")}} {{readonlyinline}} {{non-standard_inline}} {{obsolete_inline}}</dt> + <dd>renvoie un <code>double</code> qui indique la position de lecture initiale en secondes.</dd> + <dt>{{domxref("HTMLMediaElement.mozChannels")}} {{readonlyinline}} {{non-standard_inline}} {{deprecated_inline}}</dt> + <dd>renvoie un <code>double</code> représentant le nombre de canaux dans la ressource audio (c'est-à-dire 2 pour stéréo).</dd> +</dl> + +<h3 id="Gestionnaires_dévènements_obsolètes">Gestionnaires d'évènements obsolètes</h3> + +<dl> + <dt>{{domxref("HTMLMediaElement.onmozinterruptbegin")}} {{non-standard_inline}} {{obsolete_inline}}</dt> + <dd>définit le {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) appelé lorsque l'élément média est interrompu du fait du gestionnaire de canaux audio. C'était une spécificité de Firefox, implémentée pour Firefox OS et supprimée à partir de Firefox 55.</dd> + <dt>{{domxref("HTMLMediaElement.onmozinterruptend")}} {{non-standard_inline}} {{obsolete_inline}}</dt> + <dd>définit le {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) appelé lorsque l'interruption est terminée. C'était une spécificité de Firefox, implémentée pour Firefox OS et supprimée à partir de Firefox 55.</dd> +</dl> + +<h2 id="Méthodes">Méthodes</h2> + +<p><em>Cette interface hérite aussi des méthodes de ses ancêtres {{domxref("HTMLElement")}}, {{domxref('Element')}}, {{domxref('Node')}} et {{domxref('EventTarget')}}.</em></p> + +<dl> + <dt>{{domxref("HTMLMediaElement.addTextTrack()")}}</dt> + <dd>Ajoute une piste de texte (telle qu'une piste pour les sous-titres) à un élément de média.</dd> + <dt>{{domxref("HTMLMediaElement.captureStream()")}} {{experimental_inline}}</dt> + <dd>Renvoie {{domxref("MediaStream")}}, capture un flux du contenu du média.</dd> + <dt>{{domxref("HTMLMediaElement.canPlayType()")}}</dt> + <dd>Détermine si le type de média spécifié peut être lu.</dd> + <dt>{{domxref("HTMLMediaElement.fastSeek()")}}</dt> + <dd>cherche directement à l'heure donnée.</dd> + <dt>{{domxref("HTMLMediaElement.load()")}}</dt> + <dd>Réinitialise l'élément média et redémarre la ressource. Tous les événements en attente sont ignorés. La quantité de données média récupérées est toujours affectée par l'attribut <code>preload</code>. Cette méthode peut être utile pour libérer des ressources après la suppression de tout attribut <code>src</code> et des descendants d'éléments <code>source</code>. Sinon, il est généralement inutile d'utiliser cette méthode, à moins que cela ne soit nécessaire pour réanalyser les enfants de l'élément <code>source</code> après des modifications dynamiques.</dd> + <dt>{{domxref("HTMLMediaElement.mozCaptureStream()")}} {{non-standard_inline}}</dt> + <dd>[enter description]</dd> + <dt>{{domxref("HTMLMediaElement.mozCaptureStreamUntilEnded()")}} {{non-standard_inline}}</dt> + <dd>[enter description]</dd> + <dt>{{domxref("HTMLMediaElement.mozGetMetadata()")}} {{non-standard_inline}}</dt> + <dd>Renvoie un {{jsxref('Object')}}, qui contient des propriétés représentant les métadonnées de la ressource média en cours de lecture, comme paires <code>{key: value}</code>. Une copie distincte des données est renvoyée chaque fois que la méthode est appelée. Cette méthode doit être appelée après le déclenchement de l'évènement <a href="/en-US/docs/Web/Events/loadedmetadata">loadedmetadata</a>.</dd> + <dt>{{domxref("HTMLMediaElement.pause()")}}</dt> + <dd>met en pause la lecture du média.</dd> + <dt>{{domxref("HTMLMediaElement.play()")}}</dt> + <dd><span class="short_text" id="result_box" lang="fr"><span>commence la lecture du média.</span></span></dd> + <dt>{{domxref("HTMLMediaElement.seekToNextFrame()")}} {{non-standard_inline}} {{experimental_inline}}</dt> + <dd>cherche l'image suivante dans les médias. Cette méthode expérimentale non standard permet de conduire manuellement la lecture et le rendu des médias à une vitesse personnalisée, ou de se déplacer dans le média image par image pour effectuer un filtrage ou d'autres opérations.</dd> + <dt>{{domxref("HTMLMediaElement.setMediaKeys()")}} {{experimental_inline}}</dt> + <dd>Renvoie {{jsxref("Promise")}}. Définit les {{domxref("MediaKeys")}}, clés à utiliser quand le média doit être décrypté pendant la lecture.</dd> + <dt>{{domxref("HTMLMediaElement.setSinkId()")}} {{experimental_inline}}</dt> + <dd>définit l'identifiant du périphérique audio à utiliser en sortie et renvoie un {{jsxref("Promise")}}. Cela fonctionne uniquement quand l'application est autorisée à utiliser l'appareil spécifié.</dd> +</dl> + +<h2 id="Méthodes_obsolètes">Méthodes obsolètes</h2> + +<p>Ces méthodes sont obsolètes et ne doivent plus être utilisées, même si un navigateur les prend encore en charge.</p> + +<dl> + <dt>{{domxref("HTMLMediaElement.mozLoadFrom()")}} {{non-standard_inline}} {{deprecated_inline}}</dt> + <dd>Cette méthode, disponible seulement pour les implémentations Mozilla, charge les données d'un autre élément de média. Ce fonctionnement est similaire à <code>load()</code> excepté qu'à la place d'exécuter l'algorithme normal de sélection de la ressource, la source est simplement définie sur <code>currentSrc</code> de l'autre élément. Ceci est optimisé pour que cet élément accède à toutes les données mises en cache et en mémoire tampon de l'autre élément ; en fait, les deux éléments partagent les données téléchargées, de sorte que les données téléchargées par l'un ou l'autre élément sont disponibles pour les deux.</dd> +</dl> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "the-video-element.html#htmlmediaelement", "HTMLMediaElement")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Pas de changement de {{SpecName('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "embedded-content-0.html#htmlmediaelement", "HTMLMediaElement")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Définition initiale.</td> + </tr> + <tr> + <td>{{SpecName('EME', '#introduction', 'Encrypted Media Extensions')}}</td> + <td>{{Spec2('EME')}}</td> + <td>Ajout de {{domxref("MediaKeys")}}, {{domxref("MediaEncryptedEvent")}}, et setMediaKeys.</td> + </tr> + <tr> + <td>{{SpecName('Media Capture','#htmlmediaelement-extensions','HTMLMediaElement')}}</td> + <td>{{Spec2('Media Capture')}}</td> + <td>Ajout de <code>sinkId</code>, <code>setSinkId()</code> et <code>captureStream()</code>.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + + + +<p>{{Compat("api.HTMLMediaElement")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>References + <ul> + <li>Les éléments HTML {{HTMLElement("video")}} et {{HTMLElement("audio")}}.</li> + <li>Les interfaces {{domxref("HTMLVideoElement")}} et {{domxref("HTMLAudioElement")}}, dérivées de <code>HTMLMediaElement</code>.</li> + </ul> + </li> + <li>Articles + <ul> + <li><a class="internal" href="https://developer.mozilla.org/fr/Apprendre/HTML/Multimedia_and_embedding/Contenu_audio_et_video">Contenu audio et video</a></li> + <li><a class="internal" href="https://developer.mozilla.org/fr/docs/Web/HTML/Formats_pour_audio_video">Formats pris en charge par <code>audio</code> et <code>video</code></a></li> + <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Web_Audio_API">Web Audio API</a></li> + </ul> + </li> +</ul> diff --git a/files/fr/web/api/htmlmediaelement/play/index.html b/files/fr/web/api/htmlmediaelement/play/index.html new file mode 100644 index 0000000000..b65ea9ebf3 --- /dev/null +++ b/files/fr/web/api/htmlmediaelement/play/index.html @@ -0,0 +1,163 @@ +--- +title: HTMLMediaElement.play() +slug: Web/API/HTMLMediaElement/play +tags: + - API + - Audio + - HTMLMediaElement + - Interface + - Media + - Méthode + - Reference + - Video + - play +translation_of: Web/API/HTMLMediaElement/play +--- +<p>{{APIRef("HTML DOM")}} {{SeeCompatTable}}</p> + +<p>La méthode <strong><code>HTMLMediaElement.play()</code></strong> essaie de commencer la lecture du média et renvoie une {{jsxref("Promise")}} qui est résolue quand la lecture a commencé avec succès, et est rejetée si la lecture ne peut commencer pour n'importe quelle raison (comme, par exemple, une erreur de permission).</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">var <em>Promise</em> = <em>HTMLMediaElement</em>.play();</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<p>Aucun.</p> + +<h3 id="Valeur_de_retour">Valeur de retour</h3> + +<p>Une {{jsxref("Promise")}} qui est résolue quand la lecture a commencé, ou rejetée si la lecture ne peut commencer.</p> + +<h3 id="Exceptions">Exceptions</h3> + +<p>Le <em>gestionnaire de rejet</em> de la promesse est appelé avec un nom d'exception comme seul paramètre (contrairement aux exceptions traditionnelles). Les exceptions possibles incluent :</p> + +<dl> + <dt><code>NotAllowedError</code></dt> + <dd>Le client (navigateur) ou système d'exploitation ne permet pas la lecture du média dans le contexte ou la situation actuelle. Ceci peut arriver, par exemple, si le navigateur oblige l'utilisateur à lancer manuellement le média en cliquant sur le bouton "play".</dd> + <dt><code>NotSupportedError</code></dt> + <dd>La source du média (qui peut être spécifié comme un {{domxref("MediaStream")}}, {{domxref("MediaSource")}}, {{domxref("Blob")}}, ou {{domxref("File")}}, par example) ne représente pas un format supporté.</dd> +</dl> + +<p>D'autres types d'exceptions peuvent survenir selon l'implémentation du navigateur, du lecteur de média, etc.</p> + +<h2 id="Exemple">Exemple</h2> + +<p>Cet exemple commence la lecture d'un élément <code>video</code> et met à jour une box avec un message de succès si la lecture a bien démarré et un message d'erreur si une erreur survient.</p> + +<pre class="brush: js">let myVideo = document.getElementById("myVideoElement"); + +myVideo.play().then(() => { + document.getElementById("statusText").innerHTML = "Yay ! La vidéo est lancée !"; +}).catch((error) => { + document.getElementById("statusText").innerHTML = "Erreur: " + error; +}); +</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th>Spécification</th> + <th>Statut</th> + <th>Commentaire</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'embedded-content.html#dom-media-play', 'play()')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Définition initiale; living specification.</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C','embedded-content-0.html#playing-the-media-resource','play()')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<div class="note"> +<p>Notez que les versions WHATWG et W3C de la spécification diffèrent (depuis le 20 Avril 2016) par le fait que cette méthode renvoie respectivement une {{jsxref("Promise")}} ou rien du tout.</p> +</div> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fonctionnalité</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Support basique</td> + <td>{{CompatChrome(50.0)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.9.1")}}<sup>[1]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Renvoie une promesse</td> + <td>{{CompatChrome(50.0)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop(53)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fonctionnalité</th> + <th>Android</th> + <th>Android Webview</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Support basique</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(50.0)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome(50.0)}}</td> + </tr> + <tr> + <td>Renvoie une promesse</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile(53)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/fr/web/api/htmlmediaelement/volume/index.html b/files/fr/web/api/htmlmediaelement/volume/index.html new file mode 100644 index 0000000000..130734e004 --- /dev/null +++ b/files/fr/web/api/htmlmediaelement/volume/index.html @@ -0,0 +1,66 @@ +--- +title: HTMLMediaElement.volume +slug: Web/API/HTMLMediaElement/volume +tags: + - API + - Audio + - HTML DOM + - Property + - Propriété + - Reference + - Volume + - sound +translation_of: Web/API/HTMLMediaElement/volume +--- +<p>{{APIRef("HTML DOM")}}</p> + +<p>La propriété <strong><code>HTMLMediaElement.volume</code></strong> définit le volume auquel le média doit être lu. </p> + +<h2 id="Syntax" name="Syntax">Syntaxe</h2> + +<pre class="syntaxbox">var <em>volume</em> = <em>video</em>.volume; //1</pre> + +<h3 id="Valeur">Valeur</h3> + +<p>Une valeur de type double (nombre à virgule) inclut entre 0 et 1, si elle vaut 0 le son est coupé et elle vaut 1 le son est le plus élevé possible.</p> + +<h2 id="Exemple">Exemple</h2> + +<pre>var obj = document.createElement('audio'); +console.log(obj.volume); // 1 +obj.volume = 0.75;</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "#dom-media-volume", "HTMLMediaElement.volume")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "embedded-content-0.html#htmlmediaelement", "HTMLMediaElement.volume")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_navigateur">Compatibilité navigateur</h2> + + + +<p>{{Compat("api.HTMLMediaElement.volume")}}</p> + +<h2 id="See_Also" name="See_Also">Voir aussi</h2> + +<ul> + <li>The interface defining it, {{domxref("HTMLMediaElement")}}.</li> + <li>{{domxref("HTMLMediaElement.muted")}}</li> +</ul> |