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視頻 - 調整大小的模糊網頁

回答

相關問題