CODEWITHSUNDEEP
javascripthtml
kampfkuchen
kampfkuchen

Reputation: 484

Different sources for videos according to screen width

I am trying to load different video files on my website using javascript according to the screen size the website is viewed with.

My problem is that I have about 10 videos on my website, therefore I try to make it work for multiple videos but I didn't manage.

What I have tried:

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 videoArrayvid1 = [
    "https://storage.googleapis.com/coverr-main/mp4/Love-Boat.mp4", 
    "https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4"
  ]
  
  let videoArrayvid2 = [
    "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("videoArray" + element.id); // videoArrayvid1
    element.setAttribute("type", "video/mp4");
    if(window.innerWidth < screen){
      element.removeAttribute("src");
      element.setAttribute("src", "videoArray" + element.id[0]); // NOT WORKING
      element.load();
    }else{
      element.removeAttribute("src");
      element.setAttribute("src", "videoArray" + element.id[1]); // NOT WORKING
      element.load();
    }
  }

  let el = document.querySelectorAll('*[id^="vid"]')
  for (i = 0; i < el.length; i++) {
    setVideoWithScreen(700, el[i])
  }

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

Assigning the array name does not behave as I would expect.

Here is the JSFIDDLE: https://jsfiddle.net/391dacm7/2/


I would be very thankful for any kind of help!

Upvotes: 0

Views: 111

Answers (2)

ishiku_Ultra
ishiku_Ultra

Reputation: 38

If i understand correctly your looking for the video objects to resize depending on viewport. Try this:

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
</head>
<body>

    <style>

        html,
        body {
            width: 100%;
            height: 100%;
        }

    </style>

    <div class="container">
        <video id="vid0" class="video col-sm-6 col-12 gallery" type="video/mp4"></video>
        <video id="vid1" class="video col-sm-6 col-12 gallery" type="video/mp4"></video>
    </div>

    <script type="text/javascript" lang="javascript">

        let videos = {
            "vid0" : "https://storage.googleapis.com/coverr-main/mp4/Love-Boat.mp4",
            "vid1" : "https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4"
            };
        
        let node = document.querySelectorAll(".video"); 

        void function() { // for each node in nodeList -> apply a src attribute matching the node id
            node.forEach((e) => {e.setAttribute('src', videos[e.id])}); //QSA returns static node list
        }(node);

        function setVideoWithScreen(element) {
            element.forEach((e) => {e.style.width = window.innerWidth+"px"});
        };

        window.addEventListener('resize', setVideoWithScreen(node));

    </script>
</body>
</html>

Upvotes: 1

ADyson
ADyson

Reputation: 62060

Writing element.id[0] makes no sense at all. Based on the elements you have, the values for element.id could either be vid1 or vid2 - simple strings, as you'd expect a HTML element's ID to be. Possibly you meant to write videoArrayvid1[0] there instead? But then why have you got two separate variables for the video arrays? It'll be hard to refer to the correct one. Instead, have a single object with each array as a property of the object, named after the relevant video element - then you can refer to it easily by name, based on the element ID. And also putting "videoArray" at the start of the "src" is a mistake - this will make the video URL invalid. I'm not sure what you were thinking that would achieve.

Here's a corrected version of the code using the improved data structure:

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

Demo: https://jsfiddle.net/j78w36er/2/

Upvotes: 2

Related Questions