iPhone Inline Video - iPhone上で動画を埋め込み再生
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)