ITエンジニア/デザイナ向けにオープンソースを毎日紹介

iPhoneで動画を再生すると自動的にフルスクリーンになってしまいます。アプリでは最初はインライン再生できるものも出てきています。これらは独自に実装しているケースです。

Web上でも同じようにインライン再生できるようにするライブラリがiPhone Inline Videoです。

iPhone Inline Videoの使い方

デモです。上がvideoタグ、下がiPhone Inline Videoです。下の動画は自動で再生されます。

さらにWebGLと合わせることで高度なエフェクトもできます。が、iPhoneではかなり遅いです。

iPhone Inline Videoは動画のデータを取得してCanvas上に描画します。そのため自動再生はできますが、音声は再生されません。しかし埋め込まれた状態のまま動画が再生できるのは魅力です。また、この手法であればエフェクトを効かせるのも容易です。

iPhone Inline VideoはHTML5/JavaScript製のオープンソース・ソフトウェア(MIT License)です。

iphone-inline-video demo with playsinline

bfred-it/iphone-inline-video: ? Make videos playable inline on the iPhone (prevents automatic fullscreen)

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2