I am trying to load different videos according to the screen size. I found a solution to doing this using javascript. However, I am not able to integrate this code into nuxt.js.
Working Code: HTML
JavaScript
x
7
1
<div class="container">
2
<div class="row">
3
<video id="vid1" class="col-12" loop muted autoplay></video>
4
<video id="vid2" class="col-12" loop muted autoplay></video>
5
</div>
6
</div>
7
JAVASCRIPT
JavaScript
1
37
37
1
let videos = {
2
"vid1": [
3
"https://storage.googleapis.com/coverr-main/mp4/Love-Boat.mp4",
4
"https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4"
5
],
6
"vid2": [
7
"https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4",
8
"https://storage.googleapis.com/coverr-main/mp4/Love-Boat.mp4"
9
]
10
};
11
12
function setVideoWithScreen(screen, element) {
13
console.log(videos);
14
element.setAttribute("type", "video/mp4");
15
if (window.innerWidth < screen) {
16
element.removeAttribute("src");
17
element.setAttribute("src", videos[element.id][0]);
18
element.load();
19
} else {
20
element.removeAttribute("src");
21
element.setAttribute("src", videos[element.id][1]);
22
element.load();
23
}
24
}
25
26
let el = document.querySelectorAll('.video');
27
for (i = 0; i < el.length; i++) {
28
setVideoWithScreen(700, el[i])
29
}
30
31
window.addEventListener("resize", function() {
32
let el = document.querySelectorAll('.video')
33
for (i = 0; i < el.length; i++) {
34
setVideoWithScreen(700, el[i])
35
}
36
});
37
The Fiddle: https://jsfiddle.net/j78w36er/2/
I tried to integrate like this:
JavaScript
1
54
54
1
<template>
2
<div class="container">
3
<div class="row">
4
<video id="vid1" class="col-12" loop muted autoplay></video>
5
<video id="vid2" class="col-12" loop muted autoplay></video>
6
</div>
7
</div>
8
</template>
9
10
export default {
11
data () {
12
return {
13
let videos = {
14
"vid1": [
15
"https://storage.googleapis.com/coverr-main/mp4/Love-Boat.mp4",
16
"https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4"
17
],
18
"vid2": [
19
"https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4",
20
"https://storage.googleapis.com/coverr-main/mp4/Love-Boat.mp4"
21
]
22
}
23
}
24
},
25
methods: {
26
setVideoWithScreen(screen, element) {
27
element.setAttribute("type", "video/mp4");
28
if (window.innerWidth < screen) {
29
element.removeAttribute("src");
30
element.setAttribute("src", videos[element.id][0]);
31
element.load();
32
} else {
33
element.removeAttribute("src");
34
element.setAttribute("src", videos[element.id][1]);
35
element.load();
36
}
37
}
38
},
39
mounted () {
40
if (process.browser) {
41
let el = document.querySelectorAll('.video');
42
for (i = 0; i < el.length; i++) {
43
setVideoWithScreen(700, el[i])
44
}
45
46
window.addEventListener("resize", function() {
47
let el = document.querySelectorAll('.video')
48
for (i = 0; i < el.length; i++) {
49
setVideoWithScreen(700, el[i])
50
}
51
})
52
}
53
}
54
I would be very thankful for any kind of help!
Advertisement
Answer
Your code is primarily invalid and not compliant With Vue. The correct code should look like this (.vue file):
JavaScript
1
59
59
1
<template>
2
<div class="container">
3
<div class="row">
4
<video id="vid1" class="col-12" loop muted autoplay></video>
5
<video id="vid2" class="col-12" loop muted autoplay></video>
6
</div>
7
</div>
8
</template>
9
10
11
<script>
12
13
export default {
14
data () {
15
return {
16
videos: {
17
"vid1": [
18
"https://storage.googleapis.com/coverr-main/mp4/Love-Boat.mp4",
19
"https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4"
20
],
21
"vid2": [
22
"https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4",
23
"https://storage.googleapis.com/coverr-main/mp4/Love-Boat.mp4"
24
]
25
}
26
}
27
},
28
methods: {
29
setVideoWithScreen(screen, element) {
30
element.setAttribute("type", "video/mp4");
31
if (window.innerWidth < screen) {
32
element.removeAttribute("src");
33
element.setAttribute("src", this.videos[element.id][0]);
34
element.load();
35
} else {
36
element.removeAttribute("src");
37
element.setAttribute("src", this.videos[element.id][1]);
38
element.load();
39
}
40
}
41
},
42
mounted () {
43
if (process.browser) {
44
let el = document.querySelectorAll('video');
45
for (let i = 0; i < el.length; i++) {
46
this.setVideoWithScreen(700, el[i])
47
}
48
49
window.addEventListener("resize", () => {
50
let el = document.querySelectorAll('video')
51
for (let i = 0; i < el.length; i++) {
52
this.setVideoWithScreen(700, el[i])
53
}
54
})
55
}
56
}
57
}
58
</script>
59
but unfortunately there are a lot of bad practices here that you should keep in mind when writing your code. A few tips from me:
- study basic concepts of vue, there are lot of vue bugs in data, mounted. Check how vue works in documentation.
- use debounce function when you work with events like resize, scroll etc.
- use DRY pattern
- you can use vue $refs instead of querySelector