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ではまだまだ課題が残りそうです。

【週刊bitWave】(メルマガ)始めました!
登録はこちらからメールアドレスを入力してお申込みください。

ご登録いただいたメールアドレスは 【週刊bitWave】の更新情報の配信にのみ使用します。

個人情報の取扱いに関しては、「プライバシーポリシー」をご確認ください。解除はいつでこちらから行うことが可能です。

あなたにおすすめ

『iOS11』の「CoreNFC」でサンワサプライ社製のタグを読み込んでみた... 前回は『iOS11』新搭載の「Core ML」を試してみました。 <bitWave関連記事『「iOS11」新搭載の「Core ML」を駆使してMNISTの手書き数字認識を試してみた』> しかし、私の『iOS11』に対する興味はこれだ...
『iOS11』新搭載の「Core ML」を駆使してMNISTの手書き数字認識を試してみた... 今回もありましたね~、Apple社主催カンファレンス「WWDC2017(※注釈)」 ※World Wide Developer Conference:Apple社が毎年開催するデベロッパー向けイベント 新製品の「HomePod」を始...
スマホの音量調整ボタン、もっと有効活用できないの?... 「カメラ女子」なんて言葉がもてはやされ、ミラーレス一眼レフカメラが爆発的に売れた時期もありましたが、今ではスマートフォンの普及、そしてSNSの普及により、国民総 “カメラ女子(男子)” になるのではないかという勢いすら見せています。 ...
自社制作『OCR』がどんな環境でも文字認識ができるのかテストしてみた... こんにちは、M.Sです。 先日、ひょんなことから『OCR』のテストを行う機会がありました。 これまで自社サービスのサービスインやアップデートの前段階で検証を行うことがほとんどだったわけですが、今回の『OCR』検証は初めての体験。 ...