2013-06-07 3 views
8

メインサイトのコンテンツが表示される前にhtml5動画を再生するイントロページがあります。 ビデオは白い背景を持っているため、ページの背景とシンプルに統合されています。 しかし、クロムブラウザではビデオ全体が灰色の背景になっています。Chrome Html5動画は白く表示されず、灰色の背景を持っています

明らかに、2011年以降のこれらの質問は、これはクロムのバグであることを示しています。また、最新のChromeアップデートではバグが消えたと述べています。しかし、最新のchromeバージョン27.0.1453.110 mをダウンロードしましたが、まだ問題はありますか?

html 5- Videos - White is washed off in Chrome

Unwanted Background color/artifact on HTML5 Video Tag

enter image description here

誰もがこの問題のために任意の解決策や回避策を持っていますか? ...このバグは私たちのプロジェクト全体を役に立たなくする... html5の誇大宣伝にもかかわらず、クロムは2011年からビデオで白人を再生できないということは信じられないようだ。

....... EDIT ...................................... Chromeで見た場合、あなたは灰色の背景

が表示されます http://jsfiddle.net/Ykmya/5/

<body> 
<video id="introVideo" width="774" height="400" oncanplay="playIntroVideo()"> 
    <source src="http://users.telenet.be/A-I/ChromeBugTest.mp4" type="video/mp4" /> 
    Uw browser ondersteunt geen html5 video 
</video> 
</body> 

:..............

[OK]を、私はjsfiddleプロジェクトを作成しました

........ EDIT 2 ...................................... ............

pand私は単純にWebKitのフィルタを使用して明るさを引き上げ、

@media screen and (-webkit-min-device-pixel-ratio:0) { 
    video{ -webkit-filter: brightness(108.5%); } 
} 
+0

を使用してビデオの順序を設定します設定でき新しいjsfiddle? – vitozev

+0

こんにちはクリスチャン、私はjsfidlleプロジェクトを作成しました... –

+0

ありがとう、ビデオはここにロードされません...あなたは確認できますか? – vitozev

答えて

8

http://jsfiddle.net/Ykmya/8/

ここでは簡単な修正だ:アベンジャーズ答え、私は許容可能な結果を​​持ってこのCSSを追加しました。私はそれをキャンバスに描画して、ピクセルをフィルタリングします。これははるかにスムーズになるはずですが、クロスドメインを通じてビデオにアクセスすることはできません。代わりに私はちょうどCSSスタイルを使用しました

video{ 
    -webkit-filter: brightness(108.5%); 
} 

編集:これは私が信じるChromeの最新バージョンで修正されています。

+0

私はスクリーンショットを撮ってからペイントを使ってRGB値を読み込み、それらは比較的近くにあります(+/- 1)を目的の値に変更します – pandavenger

+0

これは機能します!ありがとうpandavenger! :-) –

+0

ブラウザがChromeであることを確認するためにJavascriptを作成したいと思うかもしれませんが、フィルタを適用すると、私の例は非常に単純化された例になります – pandavenger

0

複数のベンダーのブラウザで同じような背景の問題がありました。 Windowsのfirefoxの暗い背景とmacのchrome。

私はビデオ

WebMのの2つのバージョンを作成することになった - >非IEが MP4 - > [すべてのIE

とは、条件付きコメント

<!--[if !IE]><!--> 
    <source src="Content/Video/1.webmsd.webm" /> 
    <source src="Content/Video/1.mp4" /> 
<!--<![endif]--> 
<!--[if IE]><!--> 
    <source src="Content/Video/1.mp4" /> 
    <source src="Content/Video/1.webmsd.webm" /> 
<!--<![endif]--> 
関連する問題