サイトに動画を埋め込むときのアレコレ

2021/03/14

1. 軽い検証

  • videoタグ で mp4 や webm を埋め込むと、 Apache は適当に小分けにしてくれる
    • 206 Partial Contents で動画を小分けにして送ってくれる。テストした環境では大体23MBくらいの塊。
      • 動画は4MBくらいが良い、と言われているらしいので、それから思うとかなり大きめ。
        • PCで半イントラなサーバならば全く問題ないが、スマホだとやはり激重……

2. プログレッシブダウンロード (mp4)

上述の 206 Partial Contents は Apache がよしなにしてプログレッシブダウンロードで動いているものと思われる。

moov atom

プログレッシブダウンロードは mp4 の話だが、 mp4 ならばなんでも良いというわけでもない模様。

特に mp4 ファイルのデータの先頭に moov atom というメタ情報が保存されている(ファストスタートにする)必要がある。これが動画データの先頭ではなく、後ろの方に保存されていたりするとダメらしい。

Adobe MediaEncoder の場合はデフォルトが

  • 形式: H264
  • ビットレート設定: CBR

となっているので、これで良い。

3. 自動再生

  • videoタグ で自動再生するには、 autoplay属性 を付与すれば良い
    • ただし Chrome や Safari では「ページを開いた瞬間に突然音が鳴る」等を防ぐため、音声ありの動画は autoplay が付いていても自動再生されない
      • muted属性 が必須
    • スマホでは playinline属性 も必要
  • <video autoplay muted playinline></video> という形になる

iPhone

4. 音声ありの動画の場合

音声ありの動画を再生したい場合は、ありがちな実装として

  1. ページ表示時に「音声が流れますが良いですか？」と確認のダイアログを表示させる
  2. 「いいえ(音声なしで再生)」をクリックすると muted を付けて再生開始
  3. 「はい」をクリックした場合は muted せずに再生開始
  4. ダイアログ非表示

という流れ。 videoタグ というか DOM は JS で制御できる。ただし controls属性 が必要っぽい。

また、手動で制御させる場合はコントロールが動画の下端に横幅100%で表示されるため、動画の配置で苦労することになることが予想される。

5. 埋め込みサイズ

.video {
    background: {
        image: url("../img/hoge.jpg");
        repeat: no-repeat;
        position: center center;
        size: cover;
    }
}

みたいな雑な指定はできないので、 position: absolute; top: 0; left: 0; やら display: flex; justify-content: center; align-items: center; やらを駆使してどうにか配置する。

上述の通りだが controls属性 を付与して手動で操作させる場合はこのような表示方式をすると配置に苦労する。おそらく JS で幅・高さを逐次指定するような調整が必要になると思われる。

なお、 sourceタグ ならば media属性 は効くはず。 pictureタグ と組み合わせれば動画と静止画を切り替えることもできそう。

6. 小分けにするサイズを指定する

206 Partial Contents で小分けにして送信されるデータを制御しようとした場合、検索した限り Apache の設定や .htaccess は出てこなさそうだった。

サーバサイドの言語を使ってゴリゴリ。ただ、試験した感じではあまり旨味は感じられなかった。

最終的には動画のエンコーディングと回線速度に回帰する感。

後はCDNとかエッジネットワークとかでカバーできるかみたいなところ？

7. その他

検索結果に動画をサムネイル表示させる meta属性 として max-image-preview というのもある模様。

8. 参考

videoタグ

プログレッシブダウンロード

autoplay, muted

スマホでの再生

iPhone

メディアクエリ

JS で videoタグ を制御

配置

小分けにするサイズを指定する

Written by Circle
A mound built by the accumulation of hyperlinks are like Kowloon.