今回は、マッシュアップというテーマでの最終回となります。肝心カナメの動画再生画面の作成と動画上にコメントを流してみましょう。
動画再生の方法
動画は2つのパスから再生させることになります。1つは常に最初からの再生で、2つめはグラフのサムネイルからの途中からの再生です。
画面レイアウトの構築
動画再生画面に関しては、画面レイアウトを構築する部分はほとんどありません。ナビバーの左上にクローズボタンがある以外はすべてVideoPlayerのUIそのものとなります。
以上でUIの構築は終わりです。createVideoPlayerで作成したactiveMovieオブジェクトに対して、イベントハンドリングやコメントの付与を行っていきます。
動画再生機能の実装
動画再生機能としての実装はほとんど無く、プレイヤーのUIはすでに組み込み済みです。スタート、ストップなどのイベントのハンドリングができますので、それらを利用しましょう。videoPlayerで使用できるイベントは以下のようなものが用意されています。
表1 VideoPlayerのイベント
dblclickdoubletap |
durationAvailable |
error |
fullscreen |
load |
loadstate |
mediaTypesAvailable |
naturalSizeAvailable |
playbackState |
playing |
preload |
resize |
singletap |
sourceChange |
swipe |
thumbnail |
touchcancel |
touchend |
touchmove |
touchstart |
twofingertap |
動画再生の開始位置は、VideoPlayerのinitialPlaybackTimeプロパティで指定します。この値に秒数を指定することで、自動的にその位置から再生を行うことができます。
動画詳細画面からのサムネイルのクリック時にその再生位置(秒)を渡すようにしましょう。再生位置を指定しない場合は頭からの再生となります。
コメント表示の実装
さて、これでコメントを追加して…、と考えました。コメント追加のためのシーケンスは以下のようになります。
ところがVideoPlayerには現在の再生位置を知るAPIが用意されていないことがわかりました。ネイティブのAPIでも公式には公開されておらず、隠しAPIでその動きをハンドリングするという方法もあるようですが、iTunes Storeでは流通できないようです。
いろいろ考えてみたのですが、妙案浮かばず、一度再生したら早送りや巻き戻しは一切しない、という前提でとりあえずコメントを画面上に流すというやり方を紹介します(あるいは動画詳細画面に戻ってサムネイルから再生させるか…)。
最初コメントの取得については、再生時間が指定されている場合はその時間をキーに取得に行きます。指定されていない場合は0秒として扱います。その後はコメントの逐次取得が必要ですが、その部分はsetTimeout関数を用いて、取得後都度次のコメントを取得するようにします。
コメント取得はコメント取得クラスとして独立させておき、getNextList()で次のリストを取得するようにします。取得後は、コメント取得クラス側からshowRes()関数をコールするようにしています。
動画へのコメントの貼り付けは以下のように実装します。
以上で動的にコメントデータの取得、画面への表示、データの取得… という風に動作はするようになりました。しかし動画再生時間がとれないため、データ取得に失敗した場合や、データ取得に時間がかかった場合など、コメントと動画が合わなくなっていくことがありました。
実際の動作はこのようになります。
画面がちょっと見にくいですが、コメントが右から左に流れています。
まとめ
今回、長きにわたってマッシュアップというキーワードでサーバサイドからクライアントまで構築を行ってきましたが、プログラミングというよりもサービスの開発という視点が非常に重要だと感じました。1つ1つのパーツはそれほど大きなウェイトを占めることはありませんが、複数組み合わせることで効果的なサービスを構築することが可能です。
ちょっとやってみるか、という軽い感じで始められるわりにはできあがったモノはなかなか楽しい。そんなサービスがこれからもどんどん世の中に出てくると思います。個人的には、「モノを作っていく」という感覚と、「サービスを作る」という両局面が体感できたため、非常に楽しく進めることができました。
みなさまの一助になればと思います。ありがとうございました。