Chrome HTML5视频 - 调整大小的模糊网页

我在我的网站中使用BigVideo.js插件（http://dfcb.github.io/BigVideo.js/）。当用户调整浏览器大小时，我还使用以下Javascript来向上或向下缩放网站。Chrome HTML5视频 - 调整大小的模糊网页

$(document).ready(function() { 
    scaleSite(); 
}); 

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

// Scale Site to Fit Window 
function scaleSite() { 
    var windowWidth = $(window).width(); 
    var defaultWidth = 1200; 
    var scaleWidth = 1; 
    var isMobile = false; 
    if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) { 
     // MOBILE ACTIONS 
    } else { 
     // STANDARD ACTIONS 
     if(windowWidth >= defaultWidth) { 
      scaleWidth = windowWidth/defaultWidth; 
      var scaleWidthRounded = Math.round(scaleWidth * 10)/10; 
     } else { 
      scaleWidth = windowWidth/defaultWidth; 
      var scaleWidthRounded = Math.round(scaleWidth * 10)/10; 
     } 
     $("#mainDiv").css("-webkit-transform", "scale("+scaleWidth+")"); 
     $("#mainDiv").css("-moz-transform", "scale("+scaleWidth+")"); 
     $("#mainDiv").css("-o-transform", "scale("+scaleWidth+")"); 
     $("#mainDiv").css("msTransform", "scale("+scaleWidth+")"); 

     $("#fixedHeader").css("-webkit-transform", "scale("+scaleWidth+")"); 
     $("#fixedHeader").css("-moz-transform", "scale("+scaleWidth+")"); 
     $("#fixedHeader").css("-o-transform", "scale("+scaleWidth+")"); 
     $("#fixedHeader").css("msTransform", "scale("+scaleWidth+")"); 

     // RESET BODY HEIGHT 
     var mainDivHeight = ($("#mainDiv").height()*scaleWidthRounded); 
     $("body").css("height", mainDivHeight); 
     $("html").css("height", mainDivHeight); 
    } 
}

奇怪的是，当我加载具有视频播放上有一个页面，我尝试调整浏览器，缩放正常工作，但一切，但视频变得有点模糊。

我在使用Jssor Slider插件时遇到了同样的问题，它也导致我的页面在调整浏览器窗口大小后模糊。我通过将$ HWA：false添加到Jssor Slider的选项来解决该问题，该选项禁用插件使用硬件加速的功能。

BigVideo.js或底层Video.js文件中是否有某些东西可以调整以防止出现硬件加速？因为它似乎是同一个原因。

UPDATE

我只注意到了模糊问题只发生在Chrome中。 Firefox和Internet Explorer都可以正常工作，没有任何问题，但在Chrome中，页面上的所有内容都比BigVideo本身稍微模糊。

更新2

好了，所以我只注意到，如果我在包含HTML5 <video>标签的div元素进行检查，我从DOM中删除它，我的文字“扣”成为焦点。我经历了div item和unchecked CSS样式，认为这会导致我导致问题，但仍然没有运气。

为什么要从Chrome DEV工具中的DOM中删除元素，将页面的其余部分恢复为焦点并移除模糊？

下面是一个屏幕截图，显示调整浏览器窗口大小之前我的页面上的文本示例，以及调整大小后的结果。同样，如果我调整大小，页面会变得模糊，如果使用Chrome DEV工具删除包含<video>的元素，则模糊消失。

更新3

所以我删除了BigVideo插件，并与通用HTML5 <video>标签取代了它，视频仍然发挥和调整浏览器的时候模糊的问题仍然存在。所以这是Chrome浏览器处理HTML5视频以及我的缩放网站脚本的方式。

的jsfiddle

https://jsfiddle.net/h5vu7La7/3/

不知道这是否会帮助或没有，但如果调整在此的jsfiddle窗口中，您可以看到文本（在Chrome）模糊了一下。如果您从HTML中删除<video>并重新运行并调整大小，它不会模糊。

也注意到，如果您运行小提琴并检查视频中的元素并将其从DOM中删除，则文本会回到焦点。

来源

2016-02-12 Phil

什么“div与HTML5标签”？而你显示的是JavaScript，但不是页面的简化版本。 – Rob

@Rob jsFiddle提供。 – Phil

如果您将变换比例CSS规则应用于具有子元素的HTML元素（我猜这些图片中的可见元素位于您要缩放的其中一个div的内部），由于图层移动，它们会变得模糊到3D平面。

打开检查员，并将transform: scale(1.01);应用于下面的蓝色按钮上，你会明白我的意思。

而不是缩放，您应该调整视频元素的宽度和高度。

来源

2016-02-12 19:46:32 red

我很困惑。当我从页面中删除视频元素时，为什么这个比例尺会完美运行？但对于视频元素，页面上的所有内容都会变得有点模糊，除了视频？ – Phil

我不知道。 :) – red

Chrome HTML5视频 - 调整大小的模糊网页

回答

相关问题