html - Changing <Video> src based on screen size with Javascript - Stack Overflow

admin管理员组

文章数量:1356248

I'm testing on building a site locally on my machine using bootstrap.

I have a <video> sort of as the header of the site.

I would like this video to show the full width and height on mobile, and show a cropped/wide version of the video on desktop. I tried using inline media queries in the <source> tags, so that the src would change but nothing would work.

So I switched gears and used some javascript to change it that way.

So the crazy thing is, it seems my script works. When I look in chrome dev tools, the srcdoes in fact change when I resize my browser screen, however, it does not reflect on the site itself, it keeps whatever src I set it to in the html, as if it is ignoring my script.

I have tried everything I could think of, and I'm just stuck, not sure how to go about it any further. My code is below:

HTML

<video class="col-12" loop muted autoplay >
  <source id="hvid" src="media/test.mp4" type="video/mp4">
</video>

JS

let homeVideo = document.getElementById('hvid')
console.log(homeVideo.src)


function myFunction(x) {
  if (x.matches) { // If media query matches
    homeVideo.src = "media/test.mp4";
  } else {
   homeVideo.src = "media/test-3.mp4";
  }
}

var x = window.matchMedia("(max-width: 700px)")
myFunction(x) // Call listener function at run time
x.addListener(myFunction) // Attach listener function on state changes
;
console.log(homeVideo.src)

-Edits-

JS

var w = window.matchMedia("(max-width: 700px)");
 var vid = document.getElementById("vid");
 var source = document.getElementById("hvid");


window.addEventListener("resize", function screenres(){
  if (w.matches) {
    vid.pause();
    source.src = "media/test.mp4";
    vid.load();
    vid.play();
  } else {
    vid.pause();
    source.src = "media/test-3.mp4";
    vid.load();
    vid.play();
  };

});

HTML

  <div class="container">
      <div class="row">
          <video id="vid" class="col-12" loop muted autoplay>
            <source id="hvid" src="media/test.mp4" type="video/mp4">
          </video>
        </div>
    </div>

I'm testing on building a site locally on my machine using bootstrap.

I have a <video> sort of as the header of the site.

I would like this video to show the full width and height on mobile, and show a cropped/wide version of the video on desktop. I tried using inline media queries in the <source> tags, so that the src would change but nothing would work.

So I switched gears and used some javascript to change it that way.

So the crazy thing is, it seems my script works. When I look in chrome dev tools, the srcdoes in fact change when I resize my browser screen, however, it does not reflect on the site itself, it keeps whatever src I set it to in the html, as if it is ignoring my script.

I have tried everything I could think of, and I'm just stuck, not sure how to go about it any further. My code is below:

HTML

<video class="col-12" loop muted autoplay >
  <source id="hvid" src="media/test.mp4" type="video/mp4">
</video>

JS

let homeVideo = document.getElementById('hvid')
console.log(homeVideo.src)


function myFunction(x) {
  if (x.matches) { // If media query matches
    homeVideo.src = "media/test.mp4";
  } else {
   homeVideo.src = "media/test-3.mp4";
  }
}

var x = window.matchMedia("(max-width: 700px)")
myFunction(x) // Call listener function at run time
x.addListener(myFunction) // Attach listener function on state changes
;
console.log(homeVideo.src)

-Edits-

JS

var w = window.matchMedia("(max-width: 700px)");
 var vid = document.getElementById("vid");
 var source = document.getElementById("hvid");


window.addEventListener("resize", function screenres(){
  if (w.matches) {
    vid.pause();
    source.src = "media/test.mp4";
    vid.load();
    vid.play();
  } else {
    vid.pause();
    source.src = "media/test-3.mp4";
    vid.load();
    vid.play();
  };

});

HTML

  <div class="container">
      <div class="row">
          <video id="vid" class="col-12" loop muted autoplay>
            <source id="hvid" src="media/test.mp4" type="video/mp4">
          </video>
        </div>
    </div>

• javascript
• html
• video
• bootstrap-4
• media-queries

Share Improve this question Follow edited Jan 21, 2019 at 19:42 Miguerurso asked Jan 21, 2019 at 18:09 MiguerursoMiguerurso 12511 gold badge11 silver badge77 bronze badges 11

• You should capture the video onload and onerror events to see 1. if it is loading and 2. why not if not – Randy Casburn Commented Jan 21, 2019 at 18:15
• @AndrewL64 HOLY!!! Thank you so much!! That did it!! I added an eventlistener to when the window resizes and now it changes dynamically whenever I resize the browser. MUCH appreciated, I was racking my brain for hours!! – Miguerurso Commented Jan 21, 2019 at 19:25
• @AndrewL64 as I'm experimenting with it more, I'm seeing that it will only work if the window is resized. So in the html, I have the full version of the video in the code. So if I load the window to a desktop, it will fire with the default that I have written in the HTML (the full size, and not the cropped I want for desktop) How can I have it so that the correct video will load to the corresponding screen size? – Miguerurso Commented Jan 21, 2019 at 19:31
• @Miguerurso Not really sure what you mean since the current code below and in the jsfiddle does exactly that. If the jsfiddle preview section is resized to say 650px and refreshed, the respective video loads. Same if you resized the code to 750px. – AndrewL64 Commented Jan 21, 2019 at 19:33
• @AndrewL64 it seems to work in the jsfiddle, but I think by adding the resize event listener in my code, the html first loads the default src I have written in the code (regardless of what size I currently have, so it could be a 300px width or a 1400px width and it will be the same video) and the video src won't actually change until the window is resized. – Miguerurso Commented Jan 21, 2019 at 19:39

 |  Show 6 more ments

1 Answer 1

Sorted by: Reset to default 4

Just get the viewport size, and based on that value, pause the video, change the src link, load the new video and play the new video.

But do note that you will need to refresh the page after changing the browser size to see the video change.

If you want the video to change whenever the screen resizes as well as on page refresh, you will first need to move the above JavaScript to a function and run it when a resize event is fired. Then, for the page load, you need to remove the video element from your HTML and add it on page load using the createElement() method with the src attribute value also added depending on the viewport width.

---

Check this JSFiddle or run the following Code Snippet for a practical example of what I have described above:

/* JavaScript */

  var w = window.matchMedia("(max-width: 700px)");
  var vid = document.getElementById("vid");
  var source = document.createElement("source");
  source.id = "hvid";
  source.setAttribute("type", "video/mp4");
  vid.appendChild(source);
  
  if (w.matches) {
    vid.pause();
    source.removeAttribute("src");
    source.setAttribute("src", "https://storage.googleapis./coverr-main/mp4/Love-Boat.mp4");
    vid.load();
    vid.play();
  } else {
    vid.pause();
    source.removeAttribute("src");
    source.setAttribute("src", "https://sample-videos./video123/mp4/720/big_buck_bunny_720p_1mb.mp4");
    vid.load();
    vid.play();
  }

window.addEventListener("resize", function(){
  var w = window.matchMedia("(max-width: 700px)");
  var vid = document.getElementById("vid");
  var source = document.getElementById("hvid");
  
  if (w.matches) {
    vid.pause();
    source.src = "https://storage.googleapis./coverr-main/mp4/Love-Boat.mp4";
    vid.load();
    vid.play();
  } else {
    vid.pause();
    source.src = "https://sample-videos./video123/mp4/720/big_buck_bunny_720p_1mb.mp4";
    vid.load();
    vid.play();
  }
});

/* CSS */

html, body {margin: 0; padding:0; width: 100%; height: 100%;}.row{display: block !important;}

<!-- CDN Links -->

<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare./ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script><script src="https://stackpath.bootstrapcdn./bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn./font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/><link href="https://stackpath.bootstrapcdn./bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>

<!-- HTML -->

<div class="container">
  <div class="row">
    <video id="vid" class="col-12" loop muted autoplay></video>
  </div>  
</div>

本文标签： htmlChanging ltVideogt src based on screen size with JavascriptStack Overflow