Vidéo adaptive en fonction du périphérique.

Bonjour tout le monde,


J'ai fait une page html dans laquelle il y a une vidéo insérée via la balise

<video>

.
Je désirerais faire en sorte que lorsque la page html est lue sur un ordinateur se soit une vidéo "HD" qui soit chargée, et quand cette même page est lue sur un smartphone se soit une vidéo de basse qualité qui soit chargée à la place.

En recherchant sur le net, il y a ce site qui propose une solution avec ce code :

<video>
  <source src="video_small.mp4" media="screen and (max-device-width:800px)">
  <source src="video_big.mp4" media="screen and (min-device-width:801px)">
</video>

Étant donné que c'est le seul site sur lequel j'ai trouvé cette solution, je voudrais savoir si cette technique est valide et correcte.


Merci pour vos réponses et/ou suggestion.


Salutations

salut,
c'est parfaitement correct mais je crois que l'attribut "media" pour la balise <source> n'est pas encore pris en compte. Il était question d'avoir la même chose pour des images responsives avec un nouvel élément qu'est <picture> mais pour l'instant, aucun navigateur ne les reconnait.
L'autre solution serait de passer par JS ou PHP.

Merci pour ta réponse