基本
<video width="960" height="640" src="https://www.video.jp/movie.mp4" poster="https://www.video.jp/movie.jpg" autoplay loop playsinline muted controls>
<p>動画を再生するにはvideoタグをサポートしたブラウザが必要です。</p>
</video>
| 属性 | PC |
|---|---|
| width | 幅 |
| height | 高さ |
| poster | サムネイル |
| autoplay | 自動再生 |
| loop | ループ再生 |
| playsinline | インライン再生（スマホ用） |
| muted | 音無し |
| controls | コントロールを表示 |
基本上記指定すればよし。
レスポンシブにするには下記スタイルで。
video {
max-width: 100%;
width: 100%;
height: auto;
}
スマホ端末での自動再生
動画を実装するにあたって、クライアントから自動再生にしてほしいという要望がある。
結論言うと自動再生できる端末、できない端末がある。
iOS系は多分ほぼ自動再生できる。
アンドロイド系はGoolgeの動画自動再生させない宣言があるためかできない。
controlsでユーザーが再生しないと見れないず、そのためposterを指定してサムネイルを設定しないと再生ボタンがぽつっと浮いてる感じになる。
一度アンドロイドの動画事情を調べたときに下記の記事が参考になった。
無効ってことは有効にもできるかもだけど、社内の端末ではなんか制限かかってた。
Google Chromeで動画の自動再生を無効にする方法
https://www.amw.jp/2018/02/16/201802167/
楽天goldで動画を再生させたい。
楽天goldサーバーにmp4をおいて、pcから見る分には再生できる。
が、スマホ実機からみると何も操作ができない。
posterが設定してある場合はサムネイルだけ表示、
controlsが設定してある場合はサムネイルがはじかれ▶に/が入ったマークがでて操作できないようになる。（見る端末によって表現が違うのかな）
楽天側の仕様で普通にvideoで読み込みだけじゃ再生できないので、プラグインやらスクリプトで頑張ればいけるかもしれない・・・。
か、他のサーバに動画ファイルを置いて外部読み込みすれば再生はできるようです。
しかし楽天テンプレページは外部リンク駄目なのでgold限定です。