Question

我有一个模块，用户可以选择为智能手机，平板电脑和桌面播放哪个视频文件。我们假设用户上传了三个不同的视频。

当您访问该站点（本地）时，它会根据屏幕大小加载适当的文件，以便文档就绪代码正常工作。但是当您手动调整浏览器窗口的大小时，它应该监听.resize事件中的代码。

<script>
$(document).ready(function() {

var viewportWidth = $(window).width();

if (viewportWidth < 767) {
  document.write('video');
} else if (viewportWidth < 979) {
  document.write('video');
} else if (viewportWidth > 980){
  document.write('video');
}
}());   

$(window).resize(function() {

var viewportWidth = $(window).width();

if (viewportWidth < 767) {
  document.write('video');
} else if (viewportWidth < 979) {
  document.write('video');
} else if (viewportWidth > 980){
  document.write('video');
}
}());   
</script>

所以我可能搞砸了编码; - ）......而且我相信通过调整大小激活doc可能会更短。准备好的功能我删除了doc.write中很长的代码部分，然后填写了视频＆＃39;因为那里的代码不相关，只会增加混乱。我知道这段代码没有按原样显示视频。

我已经尝试了很多SO想法和其他Google Result页面。但似乎都没有效果。甚至尝试过当天做过视频的代码，但它禁用了其他原生CMS功能，因此删除了那个。

问题：

如何在每次调整浏览器窗口大小时执行以下代码？

$(document).ready(function() {

var viewportWidth = $(window).width();

if (viewportWidth < 767) {
  document.write('video');
} else if (viewportWidth < 979) {
  document.write('video');
} else if (viewportWidth > 980){
  document.write('video');
}
}());

Answer 1

使用jQuery resize（）以下是调整大小工作的小提琴：https://jsfiddle.net/b6fncgwg/

关键是使用.html（）来更改背景/视频div的html。

$(window).resize(function () {
    changeBackground();
});

changeBackground();

function changeBackground(){
    var viewportWidth = $(window).width();

    if (viewportWidth < 767) {
        $("#video-bg").html('<video autoplay nomuted loop preload="none" poster="http://research.loginsecuretest.eu/loginsecurecmp/background//images/clientvideos/small.jpg" id="bgvid-SMARTPHONE"><source type="video/mp4" src="http://research.loginsecuretest.eu/loginsecurecmp/background//images/clientvideos/small.mp4"><source type="video/webm" src="http://research.loginsecuretest.eu/loginsecurecmp/background//images/clientvideos/small.webm"><source type="video/ogg" src="http://research.loginsecuretest.eu/loginsecurecmp/background//images/clientvideos/small.ogv">');
    } else if (viewportWidth < 979) {
       $("#video-bg").html('<video autoplay nomuted loop preload="none" poster="http://research.loginsecuretest.eu/loginsecurecmp/background//images/clientvideos/SampleVideo_1080x720_1mb.jpg" id="bgvid-TABLET"><source type="video/mp4" src="http://research.loginsecuretest.eu/loginsecurecmp/background//images/clientvideos/SampleVideo_1080x720_1mb.mp4"><source type="video/webm" src="http://research.loginsecuretest.eu/loginsecurecmp/background//images/clientvideos/SampleVideo_1080x720_1mb.webm"><source type="video/ogg" src="http://research.loginsecuretest.eu/loginsecurecmp/background//images/clientvideos/SampleVideo_1080x720_1mb.ogv"></video>  <!--    Buttons or metadata go here -->');
    } else if (viewportWidth > 980) {
       $("#video-bg").html('<video autoplay nomuted loop preload="none" poster="http://research.loginsecuretest.eu/loginsecurecmp/background//images/clientvideos/jaguar_video1.jpg" id="bgvid-DESKTOP"><source type="video/mp4" src="http://research.loginsecuretest.eu/loginsecurecmp/background//images/clientvideos/jaguar_video1.mp4"><source type="video/webm" src="http://research.loginsecuretest.eu/loginsecurecmp/background//images/clientvideos/jaguar_video1.webm"><source type="video/ogg" src="http://research.loginsecuretest.eu/loginsecurecmp/background//images/clientvideos/jaguar_video1.ogv"></video>  <!--    Buttons or metadata go here');
    }
}

响应式视频窗口调整大小（可能的js / jquery冲突）

1 个答案: