web-dev-qa-db-ja.com

HTML5ビデオの背景色がWebサイトの背景色と一致しない-一部のブラウザーでは、

クライアントがウェブサイトに「シームレスに」座って欲しいビデオがあります。ビデオの背景の16進数の色は、Webサイトの16進数の背景色と一致し、一部のブラウザー、一部のバージョン、一部の状況でそのようにレンダリングされますか？

最も興味深いのは、Chromeは、カラーピッカーを開くまで、ビデオの背景を別の方法でレンダリングします。その後、それらは突然一致します。明確にするために、カラーピッカーを開いたときにのみ修正されます。デバッガではありません（これは再描画の問題ではありません）。

最初にサイトに移動したときのFirefoxのレンダリングは異なりますが、cmd + rを押すと完全にシームレスになります。

スクリーンショットを見てください-彼らは私が言葉で言うよりも多くを言います。

私はクライアントにビデオの白い背景に変更するよう説得している最中です。これで間違いなく「修正」されます。

ウィザードの洞察はありますか？

コードペン： http://codepen.io/anon/pen/zrJVpX

<div class="background" style="background-color: #e1dcd8; width: 100%; height: 100%;">
<div class="video-container">
    <video id="video" poster="" width="90%" height="auto" preload="" controls style="margin-left: 5%; margin-top: 5%;">
      <source id="mp4" src="http://bigtomorrowdev.wpengine.com/wp-content/themes/bigtomorrow/images/videos/bt-process.mp4" type="video/mp4">
      <source id="webm" src="http://bigtomorrowdev.wpengine.com/wp-content/themes/bigtomorrow/images/videos/bt-process.webm" type="video/webm">
      <source id="ogg" src="http://bigtomorrowdev.wpengine.com/wp-content/themes/bigtomorrow/images/videos/bt-process.ogv" type="video/ogg">
      We're sorry. This video is unable to be played on your browser.
      </video>
    </div>
</div>

Screenshots of the different browsers.

csshtmlvideohtml5-videobackground-color
25
tayvano

これは、ブラウザがビデオをレンダリングする方法の基本であり、簡単なCSS/HTML修正ではないようです。あなたの質問は この質問 に似ています。答えは、レンダリングエンジンと色空間の違いのいくつかの組み合わせにあると思います。これは、ブラウザー間で修正する良い方法がないことを意味します。

Firefoxでは、カラーマネジメント設定をいじって、動作が変化するかどうかを確認できます。これは問題を解決しませんが、それはそれを説明するのに役立ちます。 URL /検索バーに「about：config」と入力します。オプションページが表示されます。別の検索バーがページにレンダリングされて表示されるので、「gfx.color_management.mode」と入力します。そのオプションは値0、1、2を取ることができます。それらを切り替えてページをリロードして（Firefoxを再起動する必要がある場合があります）、一貫した違いが得られるかどうかを確認してください。ただし、色が最初から管理されていない場合は、何も変わらない可能性があります。

同様に、ハードウェアアクセラレーションによるビデオデコードをChromeで無効にすることもできます。 chrome URL /検索バーに「chrome：// flags」と入力し、「ハードウェアアクセラレーションビデオデコードを無効にする」というフラグを見つけます。値を変更し、Chromeを再起動して、再び色。

これらはどちらも私が理解している解決策ではありません。これはコメントとして提供したほうがよいかもしれませんが、まだその担当者がいません。

8
Jeremy Watson

この問題は、ブラウザに依存するだけでなく、レンダリングに依存します。ブラウザがハードウェアアクセラレーションでビデオをレンダリングするとすぐに、GPU設定が色に影響します。

たとえば、Nvidiaグラフィックカードを使用している場合は、Nvidiaコントロールパネルで色の設定を変更できます。デスクトップモニターは通常から255の完全なRGB範囲を使用しますが、16から235の限られたRGB範囲を構成することもできます。限られた範囲は一般的にテレビで使用されます。

一方のグラフィックカードドライバーは、デスクトップモニターの色の範囲をデフォルトで限られたRGB範囲に設定することがあります。一方、ユーザーはこの値を自分で変更できます。ユーザーのブラウザー設定やグラフィックカードドライバーの設定に影響を与えることはできないため、ユーザーごとに常に違いがあります。

色はどのように影響を受けますか：

Full RGB range -> limited RGB range
#000000 becomes #161616
#081F3C becomes #172A43
#FFFFFF becomes #EBEBEB

この問題を解決するための私のアプローチは次のとおりです。

Chrome、Chrome= Smartphone、Edge、Firefox、Internet Explorer 11でテストしました。

ビデオの再生または再生の準備ができたらすぐに、ビデオの最初のピクセルを確認し、それに応じて周囲のコンテナの背景色を変更します。これは、ブラウザの設定やレンダリング構成に関係なく機能します。

これはコードです：

<!doctype html>

<html>
<head>
    <title>Video</title>
    <script>
        function isColorInRange(expectedColor, givenColor) {
            const THRESHOLD = 40;
            for (var i = 0; i < 3; i++) {
                if (((expectedColor[i] - THRESHOLD) > givenColor[i]) 
                 || ((expectedColor[i] + THRESHOLD) < givenColor[i])) {
                    return false;
                }
            }
            return true;
        }

        function setVideoBgColor(vid, nativeColor) {
            if (vid) {
                var vidBg = vid.parentElement;
                if (vidBg) {
                    // draw first pixel of video to a canvas
                    // then get pixel color from that canvas
                    var canvas = document.createElement("canvas");
                    canvas.width = 1;
                    canvas.height = 1;
                    var ctx = canvas.getContext("2d");
                    ctx.drawImage(vid, 0, 0, 1, 1);

                    var p = ctx.getImageData(0, 0, 1, 1).data;
                    //console.log("rgb(" + p[0] + "," + p[1] + "," + p[2] + ")");
                    if (isColorInRange(nativeColor, p)) {        
                        vidBg.style.backgroundColor = "rgb(" + p[0] + "," + p[1] + "," + p[2] + ")";
                    }
                }
            }
        }

        function setVideoBgColorDelayed(vid, nativeColor) {
            setTimeout(setVideoBgColor, 100, vid, nativeColor);
        }
    </script>
    <style>
    body {
        margin: 0;
    }

    #my-video-bg {
        height: 100vh;
        display: flex;
        align-items: center;
        background-color: rgb(8,31,60);
    }

    #my-video {
        max-width: 100%;
        margin: 0 auto;
    }
    </style>
</head>
<body>
    <div id="my-video-bg">
        <video id="my-video" preload="metadata" onplay="setVideoBgColorDelayed(this,[8,31,60])" oncanplay="setVideoBgColorDelayed(this,[8,31,60])" controls>
            <source src="video.mp4" type="video/mp4">
        </video>
    </div>
</body>
</html>

playイベントとsetVideoBgColorDelayed関数は、Internet Explorerなどのブラウザー用です。これは、canplayイベントをすでに発生させることがありますが、drawImageキャンバスの関数。

関数isColorInRangeは、キャンバスがピクセルを取得する前にcanplayまたはplayイベントが発生した場合に、厳しい背景の変更を防ぎます。

関数がビデオ要素の前に定義されることが重要です。ドキュメントの最後にJavaScriptをロードすると、ページのロードパフォーマンスのために推奨されることが多いため、このアプローチは機能しません。

8
feng

sRGBまたは_Adobe RGB_でビデオと画像をエクスポートすると、この問題が解決するはずです。 collorプロファイルHD (1-1-1)のビデオがあり、それが原因でビデオの背景がChromeよりもSafariでわずかに明るくなりました。 macOSでテスト済み

3
Mladen Janjetovic

背景が純粋な黒または白の場合、CSSでコントラストをわずかに上げるだけで問題は完全に解決されます。

-webkit-filter: contrast(101%);
filter: contrast(101%);

Jack によるオリジナルのアイデア。

1
David

この動作 デモ を確認してください。

ビデオコンテナの背景色を＃e1dcd8として定義します。

または、既存のcssを次のように置き換えます。

 body, html {
  height: 100%;
  margin: 0;
  padding: 0;
}
.background {
    background-color: #e1dcd8;
  width: 100%;
  height: 100%;
}

.video-container{
  background:  #e1dcd8;
}

video {
  margin-left: 5%;
  margin-top: 5%;
}
0
Arun Sharma

ここでの適切な解決策は、グリーンスクリーンを使用して撮影し（おそらく既に実行済み）、

  1. 透明なwebmビデオまたは
  2. JavaScriptキャンバスを使用して緑色のピクセルを透明なピクセルに置き換えます

透明なビデオの例はここにあります： https://jakearchibald.com/scratch/alphavid/

0
Thomas

2番目のビデオをエクスポートしますが、メインビデオの背景色のみに制限します。これで、元のビデオと、長さが1秒で単色のみの2番目のビデオができました。

その動画タグには次のCSSが必要です。

#bg-video {
    position: fixed;
    width: 100vw;
    z-index: -1;
}

また、videoタグはドキュメントの上部に配置できます。

<body>
    <video id="bg-video" src="assets/bg.mp4" muted></video>
    <div>your main site html here</div>
</body>

両方のビデオが同じ方法でエクスポートされるため、色は複数のブラウザーやオペレーティングシステムでも同じようにレンダリングされる必要があります。

*「背景ビデオ」は、拡大縮小したときにブラウザの幅と高さをカバーできるように、多かれ少なかれ正方形/長方形である必要があります。

0
Matt