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

Question

我有一个模块，用户可以在其中 select 为智能手机、平板电脑和台式机播放哪个视频文件。假设用户上传了三个不同的视频。

当您访问站点（本地）时，它会根据屏幕大小加载适当的文件，以便文档就绪代码正常工作。但是，当您手动调整浏览器大小时 window 它应该听取 .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.write 中很长的代码部分，并只填写了 'video'，因为那里的代码不相关，只会增加混乱。我知道这段代码没有按原样显示视频。

我已经尝试过许多 SO 想法和其他 Google 结果页面。但是 none 似乎有效。甚至尝试了当天的代码确实做了视频，但它禁用了其他本机 CMS 功能，因此删除了那个。

问题：

如何让下面的代码在每次浏览器 window 调整大小时执行？

$(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

使用jQueryresize() 这是调整大小的 fiddle：https://jsfiddle.net/b6fncgwg/

关键是使用 .html() 来更改 background/video 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');
    }
}

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

Responsive Video Window resize (possible js / jquery conflict)

html

javascript

video

jquery

resize