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

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，挂载。查看文档中vue的工作方式
• 当您处理诸如调整大小、滚动等事件时，请使用防反弹功能
• 使用DRY模式
• 可以使用vue$refs而不是querySelector