背景を動画にして、ページ遷移すると一瞬緑画面になる

Question

全ページの背景に動画を埋め込んでいます。
使用しているのは、ytPlayerです。
ページ遷移時に、一瞬全画面が緑になってしまうのですが、こちらの解決方法は何かありますでしょうか？
サイトにはローディングアニメーションも組み込んでおります。

動画は4分のものをループさせています。
背景の動きを説明すると、

動画⇒一瞬全体が緑に⇒ローディング画面の背景色

となります。

検証サイトなので、こちらにURLは載せられないのですが、ytPlayerのオプションを書いておきます。

  <div id="bgmovie">
  <div id="ytPlayer" data-property="{
      videoURL: '動画ID',　//動画IDまたはURLを記述
      containment: '#bgmovie', //動画の位置(親要素)
      autoPlay: true, //自動再生
      loop: 1,　//ループ再生
      mute: true, //
      startAt: 0, //動画の再生位置
      showControls: false, //コントロールの非表示
      showYTLogo: false, //youtubeのロゴ等を非表示
      stopMovieOnBlur: false
  }"></div>

<script type="text/javascript">
  $("#ytPlayer").YTPlayer();
</script>

調べてもこれといった情報が出てこず途方に暮れています。
何か原因があるのでしょうか？
動画の重さや読み込みに時間がかかっているとしたら、対策などお教えいただけませんか？

お力添えいただけると幸いです。

宜しくお願いいたします。

Comments

[kuma_kuma_]

まず動画を変えても同じ現象がおきますか？
次に
<script>
//　移動する前にプレイヤー自体を非表示にする
window.onbeforeunload = function (e){
document.getElementById('ytPlayer').style.visibility ="hidden";
}
</script>
これがダメなら同じタイミングで再生停止(.disconnect())してみて下さい

[mai24451]

ご回答ありがとうございます。
動画を変えても同じような現象が起きました。
一つ目のスクリプトを書いてみましたが、ダメでした。。。
同じタイミングで、とありますが、disconnectはどこに書けばいいのでしょう。。。
非表示⇒再生停止なので、hiddenの箇所でしょうか？

[kuma_kuma_]

//　移動する前にプレイヤー自体を非表示にする
window.onbeforeunload = function (e){
// この中でdisconnect()
}

一応YouTubeのページではそのように対策されているのを確認しているのですが...

[mai24451]

<script>
//　移動する前にプレイヤー自体を非表示にする
window.onbeforeunload = function (e){
document.getElementById('ytPlayer').disconnect();
}
</script>

こちらを記載してみましたが、一瞬いけたかと思いましたが、やはりダメでした。
ページ遷移の際、緑が出ない時もあるのですが、同じページをキャッシュ消して読み込みすると結構長い間緑になってしまいます。

解決は難しいのでしょうかね。。。

Answer 1

実際の動きを考えると
0. 現在のブラウザが終了されることが通知される
0. タグ情報のリセットが下位の物から行われる
0. プレイヤーのタグが消える前に動画の読み込みが強制停止
0. この時点で動画の画像変換でエラーになるので緑が表示される
0. ブラウザが別の内容を再表示

一番よいのは画像変換でエラーさせない事でこれはファイル形式で決まります
でも今回はytPlayerですのでYouTube上の動画ですよね？
これは無理

YouTube 埋め込みプレーヤーとプレーヤーのパラメータ
JavaScript Player API のサポートは終了しています。
という事で

こちらの記述方法に変更してみて下さい。
IFrame Player API

それでもダメなら

window.onbeforeunload = function (e){
    player.clearVideo();
}

を試してみて下さい。