使用 Javascript 根据屏幕大小更改 <Video> src

Question

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

我有一种<video>作为网站的标题。

我希望此视频在移动设备上显示完整的宽度和高度，并在桌面上显示视频的裁剪/宽版本。我尝试在<source>标签中使用内联媒体查询，这样src会改变但没有任何作用。

所以我换了档并使用了一些 javascript 来改变它。

所以疯狂的是，我的脚本似乎有效。当我查看 chrome 开发工具时，src当我调整浏览器屏幕大小时，它实际上会发生变化，但是，它不会反映在网站本身上，它会保留src我在 html 中设置的任何内容，就好像它忽略了我的脚本一样。

我已经尝试了我能想到的所有方法，但我只是被困住了，不知道如何继续下去。我的代码如下：

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)

-编辑-

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>

Answer 1

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

但请注意，更改浏览器大小后，您需要刷新页面才能看到视频变化。

如果您希望视频在屏幕大小调整以及页面刷新时发生变化，您首先需要将上述 JavaScript 移动到一个函数中，并在事件resize触发时运行它。然后，对于页面加载，您需要从 HTML 中删除视频元素，并使用 createElement ()方法将其添加到页面加载中src，同时还根据视口宽度添加属性值。

检查此JSFiddle或运行以下代码片段以获取我上面描述的实际示例：

/* 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>