Changement de source vidéo HTML via JavaScript matchMedia

Vous pouvez simplement utiliser les propriétés width et height de l'objet window.screen pour obtenir la résolution de l'écran.

var video = document.getElementById("video");
if (window.screen.width > 480) {
    //video source for resolution greater than 480p
    video.src = 'http://techslides.com/demos/sample-videos/small.mp4';
}else {
    //video source for resolution less than 480p
    video.src = 'http://media.w3.org/2010/05/sintel/trailer.mp4';
}

Essayez d'utiliser:

<video id="video"></video>

vous ne pouvez pas simplement référencer la vidéo en tant que vidéo car dans le javascript, cette variable n'a été attribuée à rien. Si vous définissez l'élément que vous souhaitez modifier, cela devrait fonctionner:

<video id="vid"></video>
<script>
var mq = window.matchMedia('(min-width: 480px)');
var vid = document.getElementById("vid")
if (mq.matches) {
    vid.src = 'http://techslides.com/demos/sample-videos/small.mp4';
} else {
    vid.src = 'http://media.w3.org/2010/05/sintel/trailer.mp4';
} 
</script>

Notez que l'affectation de vid doit se produire après la construction du DOM, donc soit avoir le script après l'élément HTML, ou déclencher uniquement à un moment où vous savez que l'élément a été créé afin qu'il puisse être référencé (par exemple, l'événement body onloaded pour la page)

Offbeatmammal est correct dans la mesure où il semble que l'OP ait négligé de référencer le tag vidéo. En plus d'une référence appropriée à ladite vidéo, nous devrions «écouter» les modifications apportées à la fenêtre d'affichage si nous avons l'intention d'adapter la vidéo chaque fois que la fenêtre est redimensionnée. De plus, les vidéos dans OP doivent être inversées, tenez compte de ce qui suit:

<video></video>

La requête multimédia transmise à méthode matchMedia () signifie:

"Appliquez les règles, expressions, instructions, etc. suivantes lorsque la largeur de la fenêtre d'affichage est de 481 pixels ou plus "

Ainsi, lorsque cette condition est TRUE , la vidéo la plus grande doit être chargée, sinon la vidéo la plus petite doit être chargée:

si mQL.matches alors attribuez une vidéo plus grande à vid.src else attribuez une vidéo plus petite à vid.src

Remarque: La première vidéo (560x278) qui correspond au mQL (min-width: 481px) ergo est TRUE . La deuxième vidéo est passée d'une énorme vidéo (854x438 ce qui serait également vrai) à une vidéo de taille appropriée: (480x318). A noter également: la requête multimédia d'origine était à 480px et a été changée en 481px car la meilleure vidéo de remplacement que j'ai ATM a une largeur naturelle de 480px. Plus de détails sont commentés dans Démo et Pen ( la démonstration en mode pleine page ne semble pas fonctionner mais elle le fait dans CodePen , faites glisser la fenêtre sous une largeur de 481px pour voir la magie)

Démo 1

Deux vidéos utilisant .addListener()

const mQLs = [
  window.matchMedia(`(max-width: 854px)`),
  window.matchMedia(`(max-width: 481px)`)
];

function vidSrc(mQL) {
  const vid = document.querySelector("video");
  let url;
  if (mQLs[0].matches) {
    url = "http://techslides.com/demos/sample-videos/small.mp4";
  }
  if (mQLs[1].matches) {
    url = "https://html5demos.com/assets/dizzy.mp4";
  }
  if (!mQLs[0].matches && !mQLs[1].matches) {
    url = "http://media.w3.org/2010/05/sintel/trailer.mp4";
  }
  vid.src = url;
  vid.load();
}


for (let i = 0; i < mQLs.length; i++) {
  vidSrc(mQLs[i]);
}

<video></video>

Démo 2

Stylo a >

Trois vidéos - plusieurs mediaQueryLists dans un tableau

/*
Create a mediaQueryList Object (mQL)
https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList
*/
const mQL = window.matchMedia("(min-width: 481px)");

/*
Bind a listener to mQL -- triggers when window changes and calls vidSec callback function
https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList/addListener
*/
mQL.addListener(vidSrc);

/*
Call vidSrc() and pass mQL once to set the video src to the initial viewport. This insures
that the correct video is loaded should the viewport be less than 481px wide. Moreover
it's bad UX to start the page with an empty video tag.
*/
vidSrc(mQL);

/*
Callback function passes the mQL...
Reference the video tag...
Ternary: url is the result of [=] 
         if mQL .matches property* is [?]
         equal to or greater than 481px [TRUE]
         "http://techslides.com/demos/sample-videos/small.mp4" 
         [:] else [FALSE]
         "https://html5demos.com/assets/dizzy.mp4" 
Assign url to video .src property...
load() video
*/
/* [*] .matches Property: 
https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList/matches
*/
function vidSrc(mQL) {
  const vid = document.querySelector("video");
  let url = mQL.matches ? "http://techslides.com/demos/sample-videos/small.mp4" : "https://html5demos.com/assets/dizzy.mp4";
  vid.src = url;
  vid.load();
}

 ... const mQL = window.matchMedia("(min-width: 481px)");