更改< Video>基于屏幕大小和Java的src [英] Changing <Video> src based on screen size with Javascript

问题描述

我正在测试使用引导程序在我的计算机上本地构建站点.

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

我有一个< video> 作为网站的标题.

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

我希望该视频在移动设备上显示完整的宽度和高度，并在台式机上显示该视频的裁剪/宽版.我尝试在< source> 标记中使用内联媒体查询，以使 src 可以更改，但无济于事.

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.

所以我换了档，并使用了一些JavaScript来进行更改.

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

所以疯狂的是，我的脚本似乎可以正常工作.当我查看chrome开发工具时，实际上，当我调整浏览器屏幕的大小时， src 确实发生了变化，但是，它并没有反映在网站本身上，而是保留了任何 src 我在html中将其设置为，好像它在忽略我的脚本一样.

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>

推荐答案

只需获取视口大小，然后根据该值暂停视频，更改 src 链接，加载新视频并播放新视频.

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.

如果您希望在屏幕调整大小和刷新页面时更改视频，则首先需要将上述JavaScript移至某个函数，并在触发 resize 事件时运行它.然后，对于页面加载，您需要从HTML中删除视频元素，并使用

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.

选中此 JSFiddle 或运行以下代码段，以获取上面所述的实际示例:

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.com/coverr-main/mp4/Love-Boat.mp4");
    vid.load();
    vid.play();
  } else {
    vid.pause();
    source.removeAttribute("src");
    source.setAttribute("src", "https://sample-videos.com/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.com/coverr-main/mp4/Love-Boat.mp4";
    vid.load();
    vid.play();
  } else {
    vid.pause();
    source.src = "https://sample-videos.com/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.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/><link href="https://stackpath.bootstrapcdn.com/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>

这篇关于更改< Video>基于屏幕大小和Java的src的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！