youtube」タグアーカイブ

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

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

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

Youtubの4K60fps、8K60fpsの動画を快適に見たいけどどうしたらよいのやら。orz..

先日So-netの回線で、IPoE接続に切り替えさらに、DS-Lite(iPv6トンネルゲートウェイ)を利用し始めて快適なネット速度が出せるようになってきました。(以下の通り早い場合は200Mbpsくらいもでたりします。)

title

title

そこでディスプレイも以前から4Kディスプレイを使っていることもあり、4K60fpsのYoutube動画を快適にみたいのですが、どうしても再生で引っかかってしまいます。なにか良い方法は無いものか。。うーん。。
以下の環境でみているのですが、どうしても見ることができません。なぜだろう

だれか良い方法を知っていたら教えてほしいです。(涙)
Twitter : @yamajiro

閲覧環境

PC : MacBook Pro (Retina, 15-inch, Mid 2015)

  • CPU : 2.5 GHz Intel Core i7
  • 16 GB 1600 MHz DDR3
  • GPU : AMD Radeon R9 M370X 2048 MB

ディスプレイ : LG 27UD68-W IPSディスプレイ

  • 27インチ
  • 4K/3840×2160
  • AH-IPS非光沢
  • HDMI2.0準拠
  • 接続 : MacLab. Thunderbolt ( Mini Displayport ) → Displayport 変換 ケーブル

ルーター : BUFFALO WXR–1900DHP2 (利用推奨環境6人・4LDK・3階建)

  • 無線モード : IEEE802.11ac
  • PCとの距離は3–4mくらい接続はいつも安定している。障害物はなし

インタネットプロバイダ : So-net

  • 接続 :IPoE接続 DS-Lite(iPv6トンネルゲートウェイ)を利用(Youtubeはipv6直接つながっているはず)
  • 速度 : 遅くて 20Mbps、通常70Mbps〜100Mbps、早い時200Mbps台

利用機材の Amazonアソシエイトリンク一覧

  • MacBook Pro (Retina, 15-inch, Mid 2015)

  • LG 27UD68-W IPSディスプレイ

  • BUFFALO WXR–1900DHP2 (利用推奨環境6人・4LDK・3階建)