recursal/MDN huggingface dataset:
HTMLMediaElement: durationchange
================================

L'évènement **`durationchange`** est déclenché quand l'attribut de durée est mis à jour.

Informations générales
----------------------

Spécification

HTML5 media

Interface
`Event`
Propagation

Non

Annulable

Non

Cible
`Element`
Default Action

Aucune.

Propriétés
----------

| Property | Type | Description |
| --- | --- | --- |
| `target` Lecture seule  | `EventTarget` | The event target (the topmost target in the DOM tree). |
| `type` Lecture seule  | `DOMString` | The type of event. |
| `bubbles` Lecture seule  | `Boolean` | Whether the event normally bubbles or not. |
| `cancelable` Lecture seule  | `Boolean` | Whether the event is cancellable or not. |

Evénements liés
---------------

* `playing` (en-US)
* `waiting` (en-US)
* `seeking` (en-US)
* `seeked` (en-US)
* `ended`
* `loadedmetadata` (en-US)
* `loadeddata` (en-US)
* `canplay`
* `canplaythrough`
* `timeupdate` (en-US)
* `play` (en-US)
* `pause` (en-US)
* `ratechange` (en-US)
* `volumechange` (en-US)
* `suspend` (en-US)
* `emptied`
* `stalled` (en-US)
HTMLMediaElement.currentSrc
===========================

La propriété **`HTMLMediaElement.currentSrc`** contient l'URL absolue de la ressource multimédia choisie. Cela peut se produire, par exemple, si le serveur web sélectionne un fichier multimédia en fonction de la résolution de l'affichage de l'utilisateur. La valeur est une chaîne vide si la propriété `networkState` est `EMPTY`.

Valeur
------

Un objet `DOMString` contenant l'URL absolue de la source multimédia choisie, ce peut être :

* Une chaîne vide si `networkState` est `EMPTY` ;
* Ou une des ressources répertoriées par l'objet `HTMLSourceElement` (en-US) contenu dans l'élément média ;
* Ou la valeur de `src` si aucun élément `<source>` n'est fourni.
Exemples
--------


```js
let obj = document.createElement("video");
console.log(obj.currentSrc); // ""
```

Spécifications
--------------

| Specification |
| --- |
| HTML Standard # dom-media-currentsrc-dev |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* L'interface qui porte cette propriété, `HTMLMediaElement`.
HTMLMediaElement: canplaythrough
================================

L'événement **`canplaythrough`** 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)

Informations générales
----------------------

Spécification

HTML5 media

Interface

Event

Propagation

Non

Annulable

Non

Cible

Element

Action par défaut

Aucune

Propriétés
----------

| Property | Type | Description |
| --- | --- | --- |
| `target` Lecture seule  | `EventTarget` | The event target (the topmost target in the DOM tree). |
| `type` Lecture seule  | `DOMString` | The type of event. |
| `bubbles` Lecture seule  | `Boolean` | Whether the event normally bubbles or not. |
| `cancelable` Lecture seule  | `Boolean` | Whether the event is cancellable or not. |

Evénements liés
---------------

* `playing` (en-US)
* `waiting` (en-US)
* `seeking` (en-US)
* `seeked` (en-US)
* `ended`
* `loadedmetadata` (en-US)
* `loadeddata` (en-US)
* `canplay`
* `durationchange`
* `timeupdate` (en-US)
* `play` (en-US)
* `pause` (en-US)
* `ratechange` (en-US)
* `volumechange` (en-US)
* `suspend` (en-US)
* `emptied`
* `stalled` (en-US)
HTMLMediaElement: canplay
=========================

L'événement `canplay` est déclenché lorsque l'agent utilisateur 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).

Informations Générales
----------------------

Spécification

HTML5 media

Interface

Event

Propagation

Non

Annulable

Non

Cible

Element

Action par défaut

Aucune

Propriétés
----------

| Property | Type | Description |
| --- | --- | --- |
| `target` Lecture seule  | `EventTarget` | The event target (the topmost target in the DOM tree). |
| `type` Lecture seule  | `DOMString` | The type of event. |
| `bubbles` Lecture seule  | `Boolean` | Whether the event normally bubbles or not. |
| `cancelable` Lecture seule  | `Boolean` | Whether the event is cancellable or not. |

Evénements liés
---------------

* `playing` (en-US)
* `waiting` (en-US)
* `seeking` (en-US)
* `seeked` (en-US)
* `ended`
* `loadedmetadata` (en-US)
* `loadeddata` (en-US)
* `canplaythrough`
* `durationchange`
* `timeupdate` (en-US)
* `play` (en-US)
* `pause` (en-US)
* `ratechange` (en-US)
* `volumechange` (en-US)
* `suspend` (en-US)
* `emptied`
* `stalled` (en-US)
HTMLMediaElement.play()
=======================

**Expérimental:** **Cette fonction est expérimentale**  
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.  
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.

La méthode **`HTMLMediaElement.play()`** essaie de commencer la lecture du média et renvoie une `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).

Syntaxe
-------


```js
var Promise = HTMLMediaElement.play();
```

### Paramètres

Aucun.

### Valeur de retour

Une `Promise` qui est résolue quand la lecture a commencé, ou rejetée si la lecture ne peut commencer.

### Exceptions

Le *gestionnaire de rejet* de la promesse est appelé avec un nom d'exception comme seul paramètre (contrairement aux exceptions traditionnelles). Les exceptions possibles incluent :

`NotAllowedError`

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

`NotSupportedError`

La source du média (qui peut être spécifié comme un `MediaStream`, `MediaSource`, `Blob`, ou `File`, par example) ne représente pas un format supporté.

D'autres types d'exceptions peuvent survenir selon l'implémentation du navigateur, du lecteur de média, etc.

Exemple
-------

Cet exemple commence la lecture d'un élément `video` 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.


```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;
  });
```

Spécifications
--------------

| Specification |
| --- |
| HTML Standard # dom-media-play-dev |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
HTMLMediaElement: ended
=======================

L'événement **ended** 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.

L'événement se produit dans deux contextes liés mais unique:

* Les éléments basés sur `HTMLMediaElement` (`<audio>` et `<video>`) déclenchent **ended** lorsque la lecture du média atteint la fin.
* Les pistes de flux média, qui sont basées sur l'interface `MediaStreamTrack` (en-US), déclenchent **`ended`** lorsque 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:
    + il n'y a plus de données à envoyer.
    + L'utilisateur a révoqué les autorisations nécessaires pour que les données soient envoyées.
    + Le matériel générant les données source a été supprimé ou éjecté.
    + Un peer distant a définitivement cessé d'envoyer des données. La mise en pause des médias ne génère pas l'événement **ended**.
Informations générales
----------------------

Spécification

HTML5 media et Media Capture and Streams

Interface
`Event`
Propagation

Non

Annulable

Non

Cible
`Element`
Action par défaut

Aucune


**Note :** 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. Si à un moment donné, cela change, la documentation sera révisée.

Propriétés
----------

| Property | Type | Description |
| --- | --- | --- |
| `target` Lecture seule  | `EventTarget` | The event target (the topmost target in the DOM tree). |
| `type` Lecture seule  | `DOMString` | The type of event. |
| `bubbles` Lecture seule  | `Boolean` | Whether the event normally bubbles or not. |
| `cancelable` Lecture seule  | `Boolean` | Whether the event is cancellable or not. |

Evénements liés
---------------

* `playing` (en-US)
* `waiting` (en-US)
* `seeking` (en-US)
* `seeked` (en-US)
* `loadedmetadata` (en-US)
* `loadeddata` (en-US)
* `canplay`
* `canplaythrough`
* `durationchange`
* `timeupdate` (en-US)
* `play` (en-US)
* `pause` (en-US)
* `ratechange` (en-US)
* `volumechange` (en-US)
* `suspend` (en-US)
* `emptied`
* `stalled` (en-US)
HTMLMediaElement.buffered
=========================

La propriété **`buffered`** est une propriété en lecture seule rattachée à l'interface `HTMLMediaElement` et qui renvoie un nouvel objet `TimeRanges` normalisé statique représentant les plages de la ressource média, s'il y en a, que l'agent utilisateur a mises en mémoire tampon au moment de l'accès à la propriété `buffered`.

**Note :** Cette fonctionnalité n'est pas disponible au niveau des Web Workers.

Syntaxe
-------


```js
let timeRange = audioObject.buffered;
```

### Valeur

Un nouvel objet `TimeRanges` normalisé statique qui représente les plages de la ressource média, s'il y en a, que l'agent utilisateur a mises en mémoire tampon au moment de l'accès à la propriété `buffered`.

Exemple
-------


```js
let obj = document.createElement("video");
console.log(obj.buffered); // TimeRanges { length: 0 }
```

Spécifications
--------------

| Specification |
| --- |
| HTML Standard # dom-media-buffered-dev |
| Media Source Extensions™ # htmlmediaelement-extensions |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* L'interface qui porte cette propriété, HTMLMediaElement.
HTMLMediaElement.controls
=========================

La propriété **`HTMLMediaElement.controls`** reflète l'attribut HTML `controls` qui vérifie si les contrôles de l'interface utilisateur pour la lecture de l'élément multimédia sont affichés.

### Valeur

Une valeur booléenne. La valeur `true` signifie que les contrôles seront affichés.

Exemple
-------


```js
let obj = document.createElement("video");
obj.controls = true;
```

Spécifications
--------------

| Specification |
| --- |
| HTML Standard # dom-media-controls |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* L'interface qui porte cette propriété, `HTMLMediaElement`.
IDBKeyRange.only()
==================

La méthode **`only()`**, rattachée à l'interface `IDBKeyRange`, permet de créer un nouvel intervalle de clé qui ne contient qu'une valeur.

**Note:** Cette fonctionnalité est disponible via les Web Workers

Syntaxe
-------


```js
myKeyRange = IDBKeyRange.only(valeur);
```

### Paramètres

`valeur`

La valeur dans l'intervalle de clé.

### Valeur de retour

L'objet `IDBKeyRange` correspondant à l'intervalle de clé qui vient d'être créé.

### Exceptions

Cette méthode peut déclencher une exception `DOMException` du type `DataError` lorsque la valeur passée en argument n'est pas une clé valide.

Exemples
--------

Dans l'exemple qui suit, on illustre comment utiliser un intervalle de clé qui ne contient qu'une seule clé. On déclare un intervalle qui ne contient que la valeur "A" avec `keyRangeValue = IDBKeyRange.only("A");` Ensuite, on ouvre une transaction grâce à `IDBTransaction` puis un magasin d'objets et un curseur grâce à la méthode `IDBObjectStore.openCursor` pour laquelle on passe `keyRangeValue` en argument. Cela signifie que le curseur permettra uniquement de récupérer les enregistrements dont la clé vaut "A".


```js
function displayData() {
  var keyRangeValue = IDBKeyRange.only("A");

  var transaction = db.transaction(["fThings"], "readonly");
  var objectStore = transaction.objectStore("fThings");

  objectStore.openCursor(keyRangeValue).onsuccess = function (event) {
    var cursor = event.target.result;
    if (cursor) {
      var listItem = document.createElement("li");
      listItem.innerHTML =
        "<strong>" + cursor.value.fThing + "</strong>, " + cursor.value.fRating;
      list.appendChild(listItem);

      cursor.continue();
    } else {
      console.log("Les éléments sont affichés.");
    }
  };
}
```


**Note :** Pour un exemple complet qui utilise les intervalles de clé, vous pouvez consulter le dépôt GitHub IDBKeyRange-example (ainsi que la démonstration associée).

Spécifications
--------------

| Specification |
| --- |
| Indexed Database API 3.0 # ref-for-dom-idbkeyrange-only① |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* Utiliser IndexedDB
* Initier une connexion : `IDBDatabase`
* Utiliser les transactions : `IDBTransaction`
* Définir un intervalle de clés : `IDBKeyRange`
* Récupérer et modifier les données : `IDBObjectStore`
* Utiliser les curseurs `IDBCursor`
* Exemple de référence : To-do Notifications (exemple *live*).
IDBKeyRange.upper
=================

La propriété **`upper`**, rattachée à l'interface `IDBKeyRange`, renvoie la borne supérieure de l'intervalle de clé.

**Note:** Cette fonctionnalité est disponible via les Web Workers

Syntaxe
-------


```js
monIntervalle.upper;
```

### Valeur

La borne supérieure de l'intervalle de clé (qui peut être d'un type quelconque).

Exemples
--------

Dans l'exemple qui suit, on voit comment utiliser un intervalle de clé. On déclare `keyRangeValue = IDBKeyRange.upperBound("F", "W", true, true);` — ce qui correspond à intervalle qui inclut tout ce qui se trouve entre "F" et "W" mais pas ces valeurs (l'intervalle est « ouvert »). Ensuite, on ouvre une transaction grâce à `IDBTransaction`, un magasin d'objet et un curseur grâce à `IDBObjectStore.openCursor` pour lequel on déclare que `keyRangeValue` est l'intervalle de clé optionnel.

Après avoir déclaré l'intervalle de clé, on affiche la valeur de la propriété `upper` dans la console (ce qui doit donner "W").


```js
function displayData() {
  var keyRangeValue = IDBKeyRange.bound("F", "W", true, true);
  console.log(keyRangeValue.upper);

  var transaction = db.transaction(["fThings"], "readonly");
  var objectStore = transaction.objectStore("fThings");

  objectStore.openCursor(keyRangeValue).onsuccess = function (event) {
    var cursor = event.target.result;
    if (cursor) {
      var listItem = document.createElement("li");
      listItem.innerHTML =
        "<strong>" + cursor.value.fThing + "</strong>, " + cursor.value.fRating;
      list.appendChild(listItem);

      cursor.continue();
    } else {
      console.log("Les éléments ont été affichés.");
    }
  };
}
```


**Note :** Pour un exemple complet qui utilise les intervalles de clé, vous pouvez consulter le dépôt GitHub IDBKeyRange-example (ainsi que la démonstration associée).

Spécifications
--------------

| Specification |
| --- |
| Indexed Database API 3.0 # ref-for-dom-idbkeyrange-upper① |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* Utiliser IndexedDB
* Initier une connexion : `IDBDatabase`
* Utiliser les transactions : `IDBTransaction`
* Définir un intervalle de clés : `IDBKeyRange`
* Récupérer et modifier les données : `IDBObjectStore`
* Utiliser les curseurs `IDBCursor`
* Exemple de référence : To-do Notifications (exemple *live*).
IDBKeyRange.lower
=================

La propriété **`lower`**, rattachée à l'interface `IDBKeyRange`, renvoie la borne inférieure de l'intervalle de clé.

**Note:** Cette fonctionnalité est disponible via les Web Workers

Syntaxe
-------


```js
monIntervalle.lower;
```

### Valeur

La borne inférieure de l'intervalle de clé (qui peut être d'un type quelconque).

Exemples
--------

Dans l'exemple qui suit, on voit comment utiliser un intervalle de clé. On déclare `keyRangeValue = IDBKeyRange.upperBound("F", "W", true, true);` — ce qui correspond à intervalle qui inclut tout ce qui se trouve entre "F" et "W" mais pas ces valeurs (l'intervalle est « ouvert »). Ensuite, on ouvre une transaction grâce à `IDBTransaction`, un magasin d'objet et un curseur grâce à `IDBObjectStore.openCursor` pour lequel on déclare que `keyRangeValue` est l'intervalle de clé optionnel.

Après avoir déclaré l'intervalle de clé, on affiche la valeur de la propriété `lower` dans la console (ce qui doit donner "F").


```js
function displayData() {
  var keyRangeValue = IDBKeyRange.bound("F", "W", true, true);
  console.log(keyRangeValue.lower);

  var transaction = db.transaction(["fThings"], "readonly");
  var objectStore = transaction.objectStore("fThings");

  objectStore.openCursor(keyRangeValue).onsuccess = function (event) {
    var cursor = event.target.result;
    if (cursor) {
      var listItem = document.createElement("li");
      listItem.innerHTML =
        "<strong>" + cursor.value.fThing + "</strong>, " + cursor.value.fRating;
      list.appendChild(listItem);

      cursor.continue();
    } else {
      console.log("Les éléments ont été affichés.");
    }
  };
}
```


**Note :** Pour un exemple complet qui utilise les intervalles de clé, vous pouvez consulter le dépôt GitHub IDBKeyRange-example (ainsi que la démonstration associée).

Spécifications
--------------

| Specification |
| --- |
| Indexed Database API 3.0 # ref-for-dom-idbkeyrange-lower① |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* Utiliser IndexedDB
* Initier une connexion : `IDBDatabase`
* Utiliser les transactions : `IDBTransaction`
* Définir un intervalle de clés : `IDBKeyRange`
* Récupérer et modifier les données : `IDBObjectStore`
* Utiliser les curseurs `IDBCursor`
* Exemple de référence : To-do Notifications (exemple *live*).
IDBKeyRange.lowerBound()
========================

La méthode **`lowerBound()`**, rattachée à l'interface `IDBKeyRange`, crée un intervalle de clé avec une borne inférieure.

Par défaut, la borne est inclue dans l'intervalle (autrement dit, il est fermé à gauche).

**Note:** Cette fonctionnalité est disponible via les Web Workers

Syntaxe
-------


```js
IDBKeyRange.lowerBound(borne);
IDBKeyRange.lowerBound(borne, ouvert);
```

### Paramètres

`borne`

La valeur de la borne inférieure pour l'intervalle.

`ouvert Facultatif`

Ce booléen indique si l'intervalle est ouvert à gauche (autrement dit, s'il vaut `false` la borne est inclue et s'il vaut `true` la borne n'est pas inclue dans l'intervalle).

### Valeur de retour

Un objet `IDBKeyRange` qui correspond à l'intervalle de clé créé.

### Exceptions

Cette méthode peut lever une exception `DOMException` de type `DataError` lorsque la valeur passée en paramètre n'est pas une clé valide.

Exemples
--------

Dans l'exemple qui suit, on illustre comment créer un intervalle de clé avec une borne inférieure, on utilise `keyRangeValue = IDBKeyRange.lowerBound("F", false);` — cela permet de créer un intervalle qui contient "F" et les valeurs inférieures. On ouvre ensuite une transaction grâce à `IDBTransaction`) puis un magasin d'objet et un curseur avec la méthode `IDBObjectStore.openCursor` à laquelle on associe l'intervalle de clé `keyRangeValue`.

Si on a avait utilisé `IDBKeyRange.lowerBound("F", true);`, "F" n'aurait pas fait partie de l'intervalle.


```js
function displayData() {
  var keyRangeValue = IDBKeyRange.lowerBound("F");

  var transaction = db.transaction(["fThings"], "readonly");
  var objectStore = transaction.objectStore("fThings");

  objectStore.openCursor(keyRangeValue).onsuccess = function (event) {
    var cursor = event.target.result;
    if (cursor) {
      var listItem = document.createElement("li");
      listItem.innerHTML =
        "<strong>" + cursor.value.fThing + "</strong>, " + cursor.value.fRating;
      list.appendChild(listItem);

      cursor.continue();
    } else {
      console.log("Les éléments sont affichés.");
    }
  };
}
```


**Note :** Pour un exemple complet qui utilise les intervalles de clé, vous pouvez consulter le dépôt GitHub IDBKeyRange-example (ainsi que la démonstration associée).

Spécifications
--------------

| Specification |
| --- |
| Indexed Database API 3.0 # ref-for-dom-idbkeyrange-lowerbound① |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* Utiliser IndexedDB
* Initier une connexion : `IDBDatabase`
* Utiliser les transactions : `IDBTransaction`
* Définir un intervalle de clés : `IDBKeyRange`
* Récupérer et modifier les données : `IDBObjectStore`
* Utiliser les curseurs `IDBCursor`
* Exemple de référence : To-do Notifications (exemple *live*).