整ったLPを作るのが、とびきり大好きな、弓削田です。
そろそろ、ゲームの公開を考える時期が来たので、事前に取得してあったドメインにLP（ランディングページ）を作ってみました。
このページを使ってゲームの宣伝ができればいいかなと考えています。
LP公開
最初にそのページを公開しておきますね。
https://skill-land.com/
画面いっぱいに動画を再生させて、動きのあるページにしてみました。
ちなみに、この動画、一定期間で変わるようになっていて、１０パターンぐらい登録してあるので、
しばらくの間は、飽きずに見てもらえるかな〜と思ってます。
ただし、今まだ、ゲームを開始できないので、このLPのみだけでご勘弁くださいませ。
※2021年6月上旬時点の情報です。
動画再生で困ったこと
とりあえず、備忘録ブログなので、このLPを作る時に、躓いたポイントとその解決策を書いておきます。
画面いっぱいに表示してある動画なんですが、おそらく、今現在はどのブラウザでも問題なく再生されていると思いますが、
開発サーバーでマルチブラウザ確認をしようと思ったところ、iPhone(safari)ブラウザで、全く再生がされず、
調査するのに、半日ほど費やしたという話です。
ググってみたところ、ほとんどのサイトで、次のポイントが指摘されていました。
1. 音声が入っている動画はページ読み込み語の自動再生はできない。
2. インライン動画再生の対応のために、videoタグに「playsinline」をセットする
3. autoplay属性をセットするときは、「muted」を付けなければいけない
実は、これらの条件は、子の段階でクリアしてある状態だったんですね。
GoogleChromeでは、何の問題もなく再生されるのに、Safariは、タグどころか、mp4を直接ブラウザで表示してみても、再生どころか、読み込みすらされない。
でも、デバッグツールで調べてみると、動画ファイルはネットワークステータスが200番で、正常読み込みができている。
でも、デバッグツールのプレビューを見ると、エラーが表示されてしまう。
safariで動画再生ができないときの解決方法
今回の原因は、「HTTPS」でした。
開発サーバーは、80番ポート(HTTP)で動作させていたために、safariでは、mp4を再生する条件として、HTTPSが必須になっているようです。
ブラウザごとに、こうした挙動が違うという事事態が問題なのだが、ここに文句を言ってもIEも数十年対応までにかかったという歴史を考えると、従順になるしかない。
そこで、サーバーを先にセットして、動画再生だけは本番確認をすることで、事なきを得ました。
まあ、ブラウザも通常はchromeを使っているので、本番確認というだけだったんですが、この結果に行き着くまでの工程がすごく無駄に感じてしまって、
ブラウザ側でmp4をここまで制御する必要があるのか？？？という疑問とともに、疲れ果ててしまいました。
こんなときは、美味しいケーキとコーヒーで自分を慰めるとしましょう。
