web-dev-qa-db-ja.com

HTML5ビデオをロードするときにロード画像を作成するにはどうすればよいですか？

ビデオプレーヤーがmp4ビデオをロードするのに時間がかかるので、HTML5はビデオのロード時に「ロード」ロゴの再生をサポートしていますか？

enter image description here

私のasp.netアプリはモバイルページなので、ビデオを再生するにはユーザーがビデオをクリックする必要があります（Android、iphoneは自動再生をサポートしていません）。そのため、ポスターとして「読み込み中」のロゴを作成することはできません。そうしないと、ユーザーはそれについて混乱します。ユーザーがiPadで再生ボタンをクリックしたときに読み込み中のロゴを表示したい。

ありがとう

ジョー

htmlvideovideo-streaming
17
Joe Yan

実際にこれを行う方法を理解するには時間がかかりすぎましたが、最後に方法を見つけたので、ここで共有します。読み込みはすべての動画で行う必要があるため、考えてみるとばかげています。あなたは彼らがhtml5ビデオ標準を作成するときにこれを考慮に入れていただろうと思うでしょう。

私はうまくいくはずだと思っていた（しかしうまくいかなかった）私の最初の理論はこれでした

  1. Jsおよびcssを介してロードするときに、ロードするbg画像をビデオに追加する
  2. 再生する準備ができたら削除します

シンプルでしょ？問題は、ソース要素が設定されているか、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およびMacのSafariでのみテストされています。バグや改善点が見つかった場合はお知らせください！

21
pixelearth

また、ビデオのロード中にプリローダー画像を追加する簡単なソリューション：HTML：

<video class="bg_vid" autoplay loop poster="images/FFFFFF-0.png">

ポスターは透明な画像1pxです。

CSS：

video {
    background-image: url(images/preload_30x30.gif);
    background-repeat: no-repeat;
    background-size: 30px 30px;
    background-position: center;
}
5
Rob

タグIDのポスターを使用する

    <video controls="controls" poster="/IMG_LOCATION/IMAGENAME">

詳細はこちら http://www.w3schools.com/html5/att_video_poster.asp

3
Simon Davies

個人的には、これを行う最もエレガントな方法は、次のようなコードを使用することです。

<video src="myVideo.fileExtension" onplaying="hideControls(this)" onwaiting="showControls(this)" preload="auto" poster="myAnimatedWebpOrGifThatSaysVideoIsNotYetReady.fileExtension">No video support?</video>

<script type="text/javascript">
//We hide the video control buttons and the playhead when the video is playing (and enjoyed by the viewer)
function hideControls(event){ event.controls=false; }
//If the video has to pause and wait for data from the server we let controls be seen if the user hovers or taps on the video. As a bonus this also makes the built-in loading animation of the browser appear e.g. the rotating circular shape and we give it a little delay (like 1 sec) because we don't want the controls to blink and the delayed show-up actually looks nicer.
function showControls(event){ setTimeout(function(){ event.controls=true; },1000); }
</script>

それをさらに良くするために、継続的に起動するontimeupdateの代わりにonplayingを使用できます。ディレイタイムは実際は1秒ではなく4秒が一番です。

1
TheLinguist

私の解決策は、window.fbAsyncInit = function（）の内部に以下を追加することでした：

var finished_rendering = function() {
    var el = document.querySelector('div#loading_msg');
    el.style.display="none";
}

FB.Event.subscribe('xfbml.render', finished_rendering);

見つかりました： https://developers.facebook.com/docs/reference/javascript/FB.Event.subscribe/v2.12

1
user1574371

おそらく、JavaScriptを使用して、動画が読み込まれていて再生の準備ができていないときにのみ表示されるアニメーションの「読み込み中」のgifでイメージオーバーレイを作成することで実現できます。

ただし、ビデオを再生する準備が整ったことを検出するためにMedia APIとリンクするJavaScriptを作成する必要があります（そのため、画像を再度非表示にすることができます）が、可能である必要があります。

1
Ian Devlin