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

查看：11
本文介绍了更改<视频>src 基于屏幕大小和 Javascript的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

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

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

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

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

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

HTML

JS

let homeVideo = document.getElementById('hvid')控制台.log(homeVideo.src)函数 myFunction(x) {if (x.matches) {//如果媒体查询匹配homeVideo.src = "media/test.mp4";} 别的 {homeVideo.src = "media/test-3.mp4";}}var x = window.matchMedia("(max-width: 700px)")myFunction(x)//在运行时调用监听器函数x.addListener(myFunction)//在状态改变时附加监听器函数;控制台.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(){如果(w.matches){视频暂停()；source.src = "media/test.mp4";视频加载()；视频播放()；} 别的 {视频暂停()；source.src = "media/test-3.mp4";视频加载()；视频播放()；};});

HTML

 
<div class="row"><video id="vid" class="col-12" 循环静音自动播放><source id="hvid" src="media/test.mp4" type="video/mp4"></视频>

解决方案

只需获取视口大小，并根据该值，暂停视频，更改 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);如果(w.matches){视频暂停()；source.removeAttribute("src");source.setAttribute("src", "https://storage.googleapis.com/coverr-main/mp4/Love-Boat.mp4");视频加载()；视频播放()；} 别的 {视频暂停()；source.removeAttribute("src");source.setAttribute("src", "https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4");视频加载()；视频播放()；}window.addEventListener("resize", function(){var w = window.matchMedia("(max-width: 700px)");var vid = document.getElementById("vid");var source = document.getElementById("hvid");如果(w.matches){视频暂停()；source.src = "https://storage.googleapis.com/coverr-main/mp4/Love-Boat.mp4";视频加载()；视频播放()；} 别的 {视频暂停()；source.src = "https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4";视频加载()；视频播放()；}});

/* CSS */html, body {margin: 0;填充:0;宽度:100%；高度:100%;}.row{display: block !important;}

<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="容器"><div class="row"><video id="vid" class="col-12" 循环静音自动播放></video>

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>

解决方案

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.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>

这篇关于更改&lt;视频&gt;src 基于屏幕大小和 Javascript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆