web-dev-qa-db-ja.com

HTML5ビデオのブラックロードフラッシュを削除する

私はプレイするオンラインゲームのWebサイトを作成しています。ヘッダーには、非常に短時間（1秒）で再生されるHTML5ビデオがあります。 Internet Explorerでは問題はありませんが、Chromeではビデオの読み込み中に非常に短い黒い画面のフラッシュがあります。このフラッシュを削除する方法はありますか？ 、背景と一致するように白にしますか？ここで私が意味することを見ることができます http://testingfortagpro.meximas.com/ 。IEとChromeビデオの読み込み方法に違いがあります。これを実装するより良い方法はありますか？アニメーションGIFを使用しようとしましたが、品質は大幅に低下します。

ありがとう！

javascripthtmlcssgoogle-chromehtml5-video
21
Tom

この ブログ投稿 のポスターセクションは、次のことを示しています。

「ポスター画像を指定しない場合、ブラウザは要素のサイズを埋めるブラックボックスを表示するだけです。」

したがって、video要素に白の背景色を追加するだけではこれを修正できないようですが、次のようにシンプルな白いポスター画像を追加できます。

<video width="320" height="240" autoplay="" poster="http://dummyimage.com/320x240/ffffff/fff" >
  <source src="http://testingfortagpro.meximas.com/movie2.mp4" type="video/mp4">
</video>
31
TimHayes

透明なgifポスターを使用できます。

poster="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"

しかし、Firefoxの点滅をなくすには十分ではありませんでした。それが再生されるまでビデオを非表示にしてしまいました：

<video autoplay style="visibility:hidden;" onplay="var s=this;setTimeout(function(){s.style.visibility='visible';},100);">

必要に応じてタイムアウトを調整します。自動再生を使用しない場合は、最大400ミリ秒まで増やす必要がありました。

2
user

ユーザーがページを更新したときにビデオタグにポスター属性を設定してもブラックボックスの点滅は停止しませんでしたが、「beforeunload」イベントで非表示機能を使用し、ブラックフラッシュが消えました。

$(window).on('beforeunload', function() {
   $("video").hide();
});
1
Darryl Mendonez

同じ問題が発生し、CSS display：noneを使用してビデオ要素を非表示にして、onLoadedDataイベントを介してロードが完了したことをビデオ要素が通知し、そのイベントに応じてdisplay：blockを設定することで修正しました。

それは黒いフラッシュを取り除きました。

1
Duke Dougal

$（window）.on（ 'beforeunload'、function（）{$（ "video"）。hide（）;}）;

これにより、ウィンドウが次のドキュメントをアンロードおよびロードする直前にビデオ要素が非表示になります。

0
user990967

Firefoxでも、ポスター属性が設定されていても、同じ点滅の問題がありました。ビデオの最初のフレームに対応するビデオタグに背景画像を追加することでこれを修正しました。

0
user3350623