全画面背景動画をスマホでも自動再生させる方法を考える。

全画面背景動画をスマホでも自動再生させる方法を考える。

情報を探してましたが散乱していて大変だったのでまとめてみました。(ツッコミなど歓迎)
いきなりですが結果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/

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です