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

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

Fiddle：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 在文档中的工作方式。
在处理调整大小、滚动等事件时使用去抖功能
使用 DRY 模式
你可以使用 vue $refs 而不是 querySelector

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

Display different video source according to screen size

javascript

vue.js

nuxt.js

nuxtjs