video.jsで、loading画面を表示させたい。

Question

video.jsのプレイヤーを使用して動画ファイルが遅延して読み込まれるまでの間
ローディングのアイコンを表示させたいとおもっているのですが、どういう風に実装すればいいのでしょうか?

javascriptで色々調べてみたのですが、video.jsの関数みたいなもので実装した方が便利なのかな?とも思いまして質問させていただきました。

お手数ですが、アドバイスいただければなと思います。

Answer 1

プレイヤーの準備完了時に実行されるreadyというイベントが用意されているようです。初期状態ではアイコンを表示させておいて、readyのタイミングで非表示にするのはどうでしょう。

videojs("video").ready(function() {
  // アイコンを非表示に
});

Wait Until the Player is Ready
http://docs.videojs.com/docs/guides/api.html

videoタグに使えるイベントハンドラのまとめ - AnTytle
http://www.antytle.com/js/video-element-events
場合によってはvideo要素のイベントを組み合わせる必要があるかもしれません。