全画面背景動画をスマホでも自動再生させる方法を考える。
情報を探してましたが散乱していて大変だったのでまとめてみました。(ツッコミなど歓迎)
いきなりですが結果Youtubeのiframeplayer apiが結局よかった。
YoutubeのJavvscriptAPIで自動を実装する。
この方法がお手軽でよいかも。以下のJSのライブラリが簡単。
mp4を直接使う方法などいろいろ見ていたのですが、結局 videoタグ/APIでできることは、YoutubeAPIでもできそうで、ソースを見ると、モバイルブラウザの判定eteもしっかり実装されているので、結局のところこちらを使うことにしました。
Modernize Your Site: Building a YouTube Video Background
https://designmodo.com/demo/videobackground/
MP4のビデオ形式や、videoタグ/APIなどについていろいろ調べたので、ついでにメモを貼っておきます。
以下、Webで使える動画形式などの条件
| 条件 | 方式など | メモ |
|---|---|---|
| ファイルフォーマット(コンテナ) | MPEG4 | (拡張子が.mp4) |
| 動画の圧縮形式 | H.264 | 昔はFirefoxがNGだったけど今はOK |
| H.264のProfile | high profile ( or main profile) | 細かく検証できて無くサイトを調べているとhighprofileでも再生できている箇所が多かった orz.. |
| H.264のレベル | 3.1 | (4でも行けそうだけど。ちょっと検証不足。) |
| 音声 | 無し | これはモバイルでほとんど自動再生ができないため自動再生の場合は無し |
動画のコーデックなどの詳細情報の調べ方。
私は、黒羽製作所さまの“真空波動研Lite” を利用させていただきました。
生産物 黒羽製作所
http://kurohane.net/seisanbutu.html
その他参考サイト
H.264 Wikipedia
https://ja.wikipedia.org/wiki/H.264
動画コーデックの種類と違い(H.264･VP9･MPEG･Xvid･DivX･WMV等)【比較】
http://aviutl.info/ko-dekku-tigai/
HTML5 の audio 要素と video 要素でサポートされているメディアフォーマット
https://developer.mozilla.org/ja/docs/Web/HTML/Supported_media_formats
Android/iOS同時対応動画をエンコードする心得
http://qiita.com/yuya_presto/items/9fed29296dbdc7fd1d5d
Supported Media Formats | Android Developers
https://developer.android.com/guide/topics/media/media-formats.html
番外(動画GIFをという話) 【Web制作】スマホのブラウザでも動画を自動再生する方法
http://www.groovoost.com/blog/web/play-video-sp
Androidで再生できる動画フォーマットを調べてみた Zenfone3編
https://www.timbreofprogram.info/blog/archives/1192
はたして iPhone は iOS 10 なら動画を自動再生できるのか
http://qiita.com/haribote/items/ef7ec97ca059eeb6d9ae
iOS10 Mobile Safariにおけるビデオの自動再生
http://qiita.com/hayakix/items/4c841ea76eab70a66e91
AndroidとiOS両方に対応するならmp4を使う
http://qiita.com/yuya_presto/items/9fed29296dbdc7fd1d5d
Can I use… Support tables for HTML5, CSS3, etc
https://caniuse.com/#search=h264
iPhone Safariで動画をインライン再生する方法
http://qiita.com/hadakadenkyu/items/75162099d0bf7cdcfdc7
スマホでの動画インライン自動再生まわりについて調べたことまとめ
http://kimagureneet.hatenablog.com/entry/2016/10/23/020054
Modernize Your Site: Building a YouTube Video Background
https://designmodo.com/demo/videobackground/
デンソー ブランドサイト
https://brand.denso.com/ja/
