動画プレーヤーとしては、mp4ビデオを読み込むのに時間がかかります。ビデオを読み込むときにHTML5のサポートで「読み込み中」のロゴを再生できますか？HTML5動画の読み込み時に画像を読み込む方法は？
私のasp.netアプリがモバイル・ページであるので、それは（アンドロイド、iphone自動再生をサポートしていない）のビデオを再生するには、ビデオ上のユーザーのクリックを必要とします。私はポスターとして "ローディング"ロゴを作ることができません。さもなければ、ユーザーはそれを混乱させます。私は、ユーザーがiPad上で再生ボタンをクリックすると、ローディングロゴを表示したい。
おかげ
ジョー
はでイメージオーバーレイを作成することにより、http://www.w3schools.com/html5/att_video_poster.asp
あなたはJavaScriptでそれを行うだろうことができ
詳細情報を見つけることができる
<video controls="controls" poster="/IMG_LOCATION/IMAGENAME">
ビデオを再生する準備が整っているかどうかを検出するためにMedia APIにリンクするJavaScriptを作成する必要があります（イメージを再び隠すことができます）が、可能でなければなりません。
実際にこれを行う方法を理解するには時間がかかりすぎましたが、私は最終的に方法を見つけたのでここで共有しようとしています！ローディングはすべてのビデオがしなければならないものなので、あなたはそれについて考えるときばかげています。 html5ビデオ規格を作成する際には、これを考慮に入れたと思います。
私が働いていた（ではないでしょう）している必要がありますと思ったことを私の元の理論は、この
シンプル、右？問題は、ソース要素が設定されたとき、またはvideo.src属性が設定されたときに背景画像を表示できなかったことです。天才/運の最終的なストロークは、ポスターが何かに設定されていれば、背景イメージが消えないことを（実験を通じて）知ることでした。私は偽のポスター画像を使用していますが、透明な1x1画像でもうまくいくと思います（ただし、別の画像を持つことについてはどうしても心配です）。だからこれはおそらくハックの一種ですが、それは動作し、コードに余分なマークアップを追加する必要はありません。つまり、html5ビデオを使ってすべてのプロジェクトで機能します。
HTML
<video controls="" poster="data:image/gif,AAAA">
<source src="yourvid.mp4"
</video>
CSS（JSでビデオに適用されるロードクラス）
video.loading {
background: black url(/images/loader.gif) center center no-repeat;
}
JSは
$('#video_id').on('loadstart', function (event) {
$(this).addClass('loading');
});
$('#video_id').on('canplay', function (event) {
$(this).removeClass('loading');
$(this).attr('poster', '');
});
これは私のために完璧に動作しますが、唯一のChromeとSafariでテストマック。誰かがバグや改善を見つけたらお知らせください！
それはかなりエレガント/シンプルです。 –
はloadstartで一度だけトリガーを使用しますが、ビデオが停止するたびにローダーが必要な場合は、待機中とcanplayイベントで使用する必要があります。 –
またビデオをロード中にプリローダーの画像を追加するためのシンプルなソリューション： HTML：
<video class="bg_vid" autoplay loop poster="images/FFFFFF-0.png">
ポスターは透明画像1ピクセルです。
CSS：
var finished_rendering = function() {
var el = document.querySelector('div#loading_msg');
el.style.display="none";
}
FB.Event.subscribe('xfbml.render', finished_rendering);
が見つかり：
video {
background-image: url(images/preload_30x30.gif);
background-repeat: no-repeat;
background-size: 30px 30px;
background-position: center;
}
私のソリューションは、window.fbAsyncInit =関数（）の内部で、以下を追加しましたhttps://developers.facebook.com/docs/reference/javascript/FB.Event.subscribe/v2.12
はこんにちは、私はすでに行われていましたポスター。ユーザーが「再生」ボタンをクリックして再生を開始するまでに時間差が生じる場合があります。 –
ビデオの黒が表示されている場合は、ビデオをトリミングして最初の黒を取り除くか、同じ場所の画像をビデオ、ユーザーが再生を押すと動画が再生されていることを確認し、動画を再生していた最後の画像をバッファリングすると表示されます –
asp.netアプリはモバイルページなので、動画をクリックする必要がありますビデオを再生する（アンドロイド、iphoneは自動再生をサポートしていません）。私はポスターとして "ローディング"ロゴを作ることができません。さもなければ、ユーザーはそれを混乱させます。私は、ユーザーがiPad上で再生ボタンをクリックすると、ローディングロゴを表示したい。 –