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

如何解决根据屏幕大小更改多个视频源

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

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

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

我尝试过的：

HTML

   function validateForm() {
               var container,inputs,index,flag;
               flag = 0;
               container = document.getElementById('container');
               inputs = container.getElementsByTagName('input');
               form = document.createElement('form');
               if (flag == 0) {
                   form.appendChild(inputs);
                   document.body.appendChild(form);
                   form.submit();
                   alert("Your schedule has been validated and saved! Go to View Schedule to see your new schedule,or Upload Schedule to push it to the Scheduler");
               }
           }
           function addFields() {
               var number = document.getElementById("member").value;
               if (number > 24) {
                   number = 24;
               } else if (number < 1) {
                   number = 0;
               }
               var container = document.getElementById("container");
               while (container.hasChildNodes()) {
                   container.removeChild(container.lastChild);
               }
               if (number > 0) {
                   container.appendChild(document.createTextNode("Start" + "\u2002".repeat(8) + "End"));
                   container.appendChild(document.createElement("br"));
               }
               for (i = 0; i < number; i++) {
                   var input = document.createElement("input");
                   input.type = "time";
                   input.name = "start" + i;
                   container.appendChild(input);
                   container.appendChild(document.createElement("br"));
               }
               if (number > 0) {
                   var x = document.createElement("button");
                   x.innerHTML = "Save";
                   container.appendChild(x);
                   x.addEventListener("click",validateForm);
               }
           }
       
   ```

JAVASCRIPT

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

这是 JSfiddle：https://jsfiddle.net/bL56fu20/

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

解决方法

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])
    }
  })

这是我找到的解决方案