根据屏幕大小显示不同的视频源

Question

我正在尝试根据屏幕尺寸加载不同的视频。 我找到了使用 javascript 的解决方案。 但是，我无法将此代码集成到 nuxt.js 中。

工作代码：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>
  </div>  
</div>

JAVASCRIPT

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

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

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

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

小提琴： https://jsfiddle.net/j78w36er/2/

我试图像这样集成：

<template>
  <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>
    </div>  
  </div>
</template>

export default {
  data () {
    return {
      let videos = {
        "vid1": [
          "https://storage.googleapis.com/coverr-main/mp4/Love-Boat.mp4",
          "https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4"
        ],
        "vid2": [
          "https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4",
          "https://storage.googleapis.com/coverr-main/mp4/Love-Boat.mp4"
        ]
      }
    }
  },
  methods: {
    setVideoWithScreen(screen, element) {
      element.setAttribute("type", "video/mp4");
      if (window.innerWidth < screen) {
        element.removeAttribute("src");
        element.setAttribute("src", videos[element.id][0]);
        element.load();
      } else {
        element.removeAttribute("src");
        element.setAttribute("src", videos[element.id][1]);
        element.load();
      }
    }
  },
  mounted () {
    if (process.browser) {    
      let el = document.querySelectorAll('.video');
      for (i = 0; i < el.length; i++) {
        setVideoWithScreen(700, el[i])
      }

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

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

Answer 1

您的代码主要是无效的，并且不符合 Vue。 正确的代码应该如下所示（.vue 文件）：

<template>
  <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>
    </div>  
  </div>
</template>


<script>

export default {
  data () {
    return {
      videos: {
        "vid1": [
          "https://storage.googleapis.com/coverr-main/mp4/Love-Boat.mp4",
          "https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4"
        ],
        "vid2": [
          "https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4",
          "https://storage.googleapis.com/coverr-main/mp4/Love-Boat.mp4"
        ]
      }
    }
  },
  methods: {
    setVideoWithScreen(screen, element) {
      element.setAttribute("type", "video/mp4");
      if (window.innerWidth < screen) {
        element.removeAttribute("src");
        element.setAttribute("src", this.videos[element.id][0]);
        element.load();
      } else {
        element.removeAttribute("src");
        element.setAttribute("src", this.videos[element.id][1]);
        element.load();
      }
    }
  },
  mounted () {
    if (process.browser) {    
      let el = document.querySelectorAll('video');
      for (let i = 0; i < el.length; i++) {
        this.setVideoWithScreen(700, el[i])
      }

      window.addEventListener("resize", () => {
        let el = document.querySelectorAll('video')
        for (let i = 0; i < el.length; i++) {
          this.setVideoWithScreen(700, el[i])
        }
      })
   }
 }
}
</script>

但不幸的是，这里有很多不好的做法，您在编写代码时应该牢记。 我的一些建议：

• 学习vue的基本概念，数据中有很多vue bug，mounted。 检查 Vue 在文档中的工作方式。
• 当您处理调整大小、滚动等事件时，请使用 debounce function。
• 使用 DRY 模式
• 你可以使用 vue $refs 而不是 querySelector