iPhoneでPicture in Pictureの実装についての考察

iPhoneでPicture in Pictureの実装についての考察

Picture in Pictureって何?

Picture in Pictureってご存知でしょうか。

メイン画面上の端っこに、別画面を用意し映像を流すような仕組みのことで、
テレビ業界で言うところのいわゆる「ワイプ」ってやつです。

image09

アプリではyoutubeが早くから取り入れています。

image07

パソコンのブラウザ上での実装はいたって簡単です。

フローティングボックス内に動画を読込み、クリックなどをトリガーに拡大縮小してやれば、ある程度形になります。

弊社の「ウェブ接客ツール|サイト・パーソナライザー」をご利用いただくと、より簡単に実装できますよ。

iPhoneの壁

しかし残念ながらこの技術はiPhoneでの実装が出来ません。

iPhoneはブラウザ上の動画を再生すると、必ず動画プレイヤーが起動するようになっており、画面の端っこで動画を流し続けることができないのです。

スマートフォンで埋め込み動画広告を見かけないのは、これが原因ですね。

iOS9での進化

しかし、このiPhoneの壁が、今秋リリース予定のiOS9で改善されそうです。

iOS9に搭載されているSafari9.0でPicture in Pictureをサポートするとのこと。

詳細はコチラ
iOS9 リリース情報

というわけで実装してみましょう。

Picture in Pictureを実装してみた

実装は非常にシンプルです。

ざっくりとこんな感じです。

webkitSupportsPresentationModeに対応しているブラウザかどうかを判定します。
対応している場合、videoをコントロールするボタンに対してアクションを割り当てます。
ボタンを押すとワイプ化するという仕組みです。

image04

これで「ワイプ化するよ」ボタンを押せば、動画がワイプ化するはず

だったんですが、β版だからなのか、ボタンを押したらSafariがフリーズしてしまいました。。。orz

残念ながらバージョンアップを待つしかなさそうですね。

iOS9だけでいいの?

ようやくPicture in Pictureが実装できるようになったとしても、iOS9でしか動作しないとなると、いまいち実用性に欠けてしまいます。

他の端末でも実装できる方法がないか模索してみました。

gifアニメではどうだろう?

動画の変わりにgifアニメを流しましょう。
これなら実装はとっても簡単ですね!!!

でも再生や一時停止をコントロールできないので、あまり使えません。。。

※ただしスマートフォンの場合、スクロールしている間だけ、gifアニメが停止することを発見しました!これを応用すると、再生、一時停止くらいは実装できるかも知れません。

後日実験してみます!

パラパラアニメはどうか!?

動画を細切れの画像にします。

それをjavascriptで制御して、ミリ秒単位で切り替えます。
いわゆるパラパラ漫画の要領です。

これなら再生等のコントロールもできますね!!

でも大量の画像を読込む必要があるので、スマートフォンでの実装はなかなか厳しそうです。

CSSスプライトにしてしまうのはどうか!?

画像の読込みが大量で困るなら、CSSスプライトにして、画像の読込み数を減らします。
読込んだ巨大な1枚の画像をjavascriptで制御し、ミリ秒単位で座標を変えてあたかも動画のように流します。

う〜ん。いまいちピンと来ないですね。

パラパラアニメもCSSスプライトも、数秒の動画ならなんとか再現できそうですが、少し長めの動画となると厳しそうですね。

スマートフォンでのPicture in PictureはiOS9正式版がリリースされたとしても、古いOSではまだまだ課題が残りそうです。

コメント