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

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

我在stackoverflow上找到了一个很好的解决方案：（）

我的问题是，我的网站上有大约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>

以下是JSFIDLE：

我将非常感谢任何形式的帮助<代码>播放视频=[

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

"https://storage.googleapis.com/coverr-main/mp4/Love-Boat.mp4", "https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4" ] 功能设置视频屏幕（屏幕、元件）{ 元素setAttribute（“类型”、“视频/mp4”）； if（window.innerWidth<屏幕）{ 元素。删除属性（“src”）； setAttribute（“src”，videos[0]）； 元素load（）； }否则{ 元素。删除属性（“src”）； setAttribute（“src”，videos[1]）； 元素load（）； } } 让el=document.getElementsByCassName（'video'）） 对于（i=0；i

---

这就是我找到的解决方案

非常感谢您的回答！我使用您的代码创建了一个JSFIDLE，不幸的是，视频在屏幕上没有改变大小。这是小提琴：。你知道我做错了什么吗？我通过将

window.screen.width

更改为

window.innerWidth

来实现。谢谢你的回答！

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