根据屏幕大小更改多个视频源

Question

我正在尝试根据浏览网站的屏幕大小使用 javascript 在我的网站上加载不同的视频文件。

我在 stackoverflow 上找到了一个很好的解决方案：https://stackoverflow.com/a/54296142/4132369 (JSFIDDLE)

我的问题是我的网站上有大约 10 个视频，因此我尝试为多个视频调整 javascript 代码但我没有管理。

我尝试过的：

HTML

<div class="container">
  <div class="row">
    <video id="vid1" class="col-12" loop muted autoplay></video>
    <video id="vid2" class="col-12" loop muted autoplay></video>
    <video id="vid3" class="col-12" loop muted autoplay></video>
  </div>  
</div>

JAVASCRIPT

let w = window.matchMedia("(max-width: 700px)");
let vid1 = document.getElementById("vid1");
let vid2 = document.getElementById("vid2");
let vid3 = document.getElementById("vid3");
let source = document.createElement("source");
source.setAttribute("type", "video/mp4");
vid1.appendChild(source1);
vid2.appendChild(source2);
vid3.appendChild(source3);

if (w.matches) {
  vid1.pause();
  vid2.pause();
  vid3.pause();
  source.removeAttribute("src");
  source.setAttribute("src", "https://storage.googleapis.com/coverr-main/mp4/Love-Boat.mp4");
  vid1.load();
  vid2.load();
  vid3.load();
  vid1.play();
  vid2.play();
  vid3.play();
} else {
  vid1.pause();
  vid2.pause();
  vid3.pause();
  source.removeAttribute("src");
  source.setAttribute("src", "https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4");
  vid1.load();
  vid2.load();
  vid3.load();
  vid1.play();
  vid2.play();
  vid3.play();
}

window.addEventListener("resize", function() {
  let w = window.matchMedia("(max-width: 700px)");
  let vid1 = document.getElementById("vid1");
  let vid2 = document.getElementById("vid2");
  let vid3 = document.getElementById("vid3");
  let source = document.getElementById("hvid");

  if (w.matches) {
    vid.pause();
    source.src = "https://storage.googleapis.com/coverr-main/mp4/Love-Boat.mp4";
    vid1.load();
    vid2.load();
    vid3.load();
    vid1.play();
    vid2.play();
    vid3.play();
  } else {
    vid1.pause();
    vid2.pause();
    vid3.pause();
    source.src = "https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4";
    vid1.load();
    vid2.load();
    vid3.load();
    vid1.play();
    vid2.play();
    vid3.play();
  }
});

这里是 JSFIDDLE：https://jsfiddle.net/bL56fu20/

我会非常感谢任何形式的帮助！

Answer 1

let videos = [
    "https://storage.googleapis.com/coverr-main/mp4/Love-Boat.mp4", 
    "https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4"
  ]

  function setVideoWithScreen(screen, element){
    element.setAttribute("type", "video/mp4");
    if(window.innerWidth < screen){
      element.removeAttribute("src");
      element.setAttribute("src", videos[0]);
      element.load();
    }else{
      element.removeAttribute("src");
      element.setAttribute("src", videos[1]);
      element.load();
    }
  }

  let el = document.getElementsByClassName('video')
  for (i = 0; i < el.length; i++) {
    setVideoWithScreen(700, el[i])
  }

  window.addEventListener("resize", function() {
    let el = document.getElementsByClassName('video')
    for (i = 0; i < el.length; i++) {
      setVideoWithScreen(700, el[i])
    }
  })

这是我找到的解决方案